使用vue

课前准备：直播流协议https://www.cnblogs.com/yangchin9/p/14930874.html

摘要：在h5页面实现观看直播+视频回放；在开发期间使用过video.js、mui-player等插件，发现这些video插件对移动端的兼容性都不友好，最后发现一个在移动端兼容不错的插件——vue-video-player

场景：

移动端h5页面，项目是vue搭建的，使用的是hls协议以m3u8结尾的直播流

一、安装vue-video-player

播放hls视频流需要安装 videojs-contrib-hls插件，播放rtmp视频流则安装 videojs-flash插件，hls插件与flash插件同时使用时flash插件需要在hls插件之前引入；（资料上讲安装vue-video-player时会自动安装hls插件，实际操作中并没有，还是自己手动安装吧！）

安装方式1:

cdn方式，直接在html文件头部引入文件:　　<link rel="stylesheet" href="path/to/video.js/dist/video-js.css"/>　　<script type="text/javascript" src="path/to/video.min.js"></script>　　<script type="text/javascript" src="path/to/vue.min.js"></script>　　<script type="text/javascript" src="path/to/dist/vue-video-player.js">　　</script>　　　　<script type="text/javascript"> vue.u(window.vuevideoplayer)　　</script>

安装方式2:

点击查看代码

nmp安装插件:　　npm install vue-video-player --save    npm install videojs-contrib-hls --savemain.js中引入基础样式文件:// 引入videoplayer样式import 'video.js/dist/video-js.css'    按需引入：import 'videojs-contrib-hls'import { videoplayer } from 'vue-video-player'components: {    videoplayer},     全局引入:import vue from 'vue'import vuevideoplayer from 'vue-video-player' // 自定义样式引入，在<video-player>添加对应类名，例如video-player-custom// import 'vue-video-player/src/custom-theme.css'vue.u(vuevideoplayer, /* { 　 options: 全局默认配置,   events: 全局videojs事件}*/)

二、使用 vue-video-player

<template>  <!-- playsinline：设置播放器在移动设备上不全屏[ boolean, default: fal ] -->  <!-- customeventname：自定义状态变更时的事件名[ string, default: 'statechanged' ] -->    <video-player　　　　class="video-player-custom"        ref="videoplayer"        :options="playeroptions"        :playsinline="true"        customeventname="customstatechangedeventname"        @play="onplayerplay"        @pau="onplayerpau"       郑州大学官网 @ended="onplayerended"        @ready="playerreadied"        @statechanged="playerstatechanged"        @playing="onplayerplaying"        @waiting="onplayerwaiting"        @loadeddata="onplayerloadeddata"        @timeupdate="timeupdate"        @canplay="onplayercanplay"        @canplaythrough="onplayercanplaythrough">    </video-player></template><script>import 'videojs-contrib-hls'import { videoplayer } from 'vue-video-player'export default {  　components: {        videoplayer    },　　data() { 　　　　return { 　　　　　　playeroptions: { 　　　　　　　　　// 是否静音                  muted: true,                  // 默认为英语，设置为中文                  language: 'zh-cn',                  // 播放速度，指定后video.js将显示一个控件(vjs-playback-rate类的控件)，允许用户选择播放速度                  playbackrates: [0.5, 1.0, 1.5, 2.0],                  // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值，表示长宽比例                  aspectratio: '4:3',         　　　　 // 兼容顺序，默认值是['html5']，其他已注册的技术将按其注册的顺序在该技术之后添加。                  techorder: ['html5'],                  // 等同于原生<video>标签中的一组<source>子标签，可实现优雅降级；type 属性规定媒体资源的 mime 类型                  sources: [                        //{                    　　//type: "video/mp4",                    　　//src: ""                  //},                        //{                    　　//type: "rtmp/flv",                    　　//src: ""                  //},                   {                     　　type: "application/x-mpegurl",                     　　src: "/d/file/titlepic/prog_index.m3u8"                   },                   ],                  // 视频封面                  poster: require('./icon/cover.jpg'),　　　　　　　 }　　　　}　　},　　computed: {     //插件节点 用于添加自定义按钮事件　　　　player() { 　　　　　　return this.$refs.videoplayer.player 　　　　}　　},    mounted() {},    methods: {        // 播放回调        onplayerplay(player) {        },        // 暂停回调    就近原则的短语    onplayerpau(player) {          //console.log(player)        },        // 视频播放结束回调        onplayerended(player) {          //console.log(player)        },        // dom元素上的readystate更改导致播放停止        onplayerwaiting(player) {          //console.log(player)        },        // 已开始播放回调        onplayerplaying(player) {          //console.log(player)        },        // 当播放器在当前播放位置下载数据时触发        onplayerloadeddata($event) {          //console.log($event)        },        // 当前播放位置发生变化时触发。        onplayertimeupdate($event) {          //console.log($event)        },        //媒体的readystate为have_future_data或更高        onplayercanplay($event) {          //console.log($event)        },        //媒体的readystate为have_enough_data或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。        onplayercanplaythrough($event) {          //console.log($event)        },        //播放状态改变回调        playerstatechanged($event) {          //console.log($event)        },        //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。        playerreadied($event) {          //console.log($event)        },    }}</script><style lang="scss" scoped>.video-player-custom{    width: 100%;    height: 180px;    // vidoeui重写    /deep/ .video-js{        width: 100%;        height: 100%;        padding: 0;        overflow: hidden;        // 播放器         .vjs-tech{        　　object-fit: cover;        }        // 播放按钮        .vjs-big-play-button {            position: absolute;            top: 50%;            left: 50%;            width: 2em;            height: 2em;            margin-top: -1em;            m有效期限argin-le南方大学排名ft: -1em;            font-size: 2em;            line-height: 2em;            border-radius: 50%;            background-color: rgba(0,0,0,0.45);            outline: none;        }        // 封面        .vjs-poster{            width: 100%;            height: 100%;            background-size: cover;  煜煜怎么读      }    }}  </style>

到此这篇关于使用vue-video-player实现直播的文章就介绍到这了,更多相关vue-video-player直播内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！