一、使用npm安装videojs
npm i video.js --savenpm i videojs-flash --save
二、页面中导入videojs
importvideojsfrom'video.js'import'video.js/dist/video-js.min.css'import'videojs-flash'
三、定义播放器区域
<!-- 播放器显示区域 --><viewclass="video-display-wrap"><!-- 播放器最终在view的子级显示 --><viewclass="video-js"ref="video"style="width: 100%; height: 100%"></view><!-- 播放器最终在view的子级显示 --><!-- 自定义播放按钮（图片自行替换） --><imagev-if="!isPlaying":src="resource.playBtnIcon"mode="heightFix"class="play-btn-icon"@click="playVideo"></image><!-- 自定义播放按钮 --><!-- 视频蒙版用于点击视频能够切换播放状态 --><viewclass="video-mask"@click="switchPlayVideo"></view><!-- 视频蒙版用于点击视频能够切换播放状态 --></view><!-- 播放器显示区域 -->
四、onReady中初始化播放器
1.data里面定义变量
data(){return{...//视频播放器videoPlayer:null,//是否正在播放isPlaying:false,}}
2.onReady里面
onReady(){...//初始化播放器this.initVideo()},
3.初始化播放器以及基础的操作方法
#示例代码,部分变量是业务中用到的initVideo(){letvideo=document.createElement('video')video.id='video'//如果需要全屏幕展现播放器需要增加 object-fit: cover;video.style='width: 100%; height: 100%;'video.controls=falsevideo.setAttribute('playsinline',true)//IOS微信浏览器支持小窗内播放video.setAttribute('webkit-playsinline',true)//这个bai属性是ios 10中设置可以让视频在小du窗内播放，也就是不是全屏播放的video标签的一个属性video.setAttribute('x5-video-player-type','h5')//安卓 声明启用同层H5播放器 可以在video上面加东西letsource=document.createElement('source')source.src='http://xxxx.m3u8'//设定的流地址//根据流地址的后缀设置好播放类型if(source.src.indexOf('.mp4')!==-1){//mp4类型source.type='video/mp4'}elseif(source.src.indexOf('.m3u8')!==-1){//hls类型source.type='application/x-mpegURL'}elseif(source.src.indexOf('.flv')!==-1){//flv类型source.type='video/flv'}else{//rtmp类型source.type='rtmp/hls'}//将播放源添加到video的子级video.appendChild(source)//挂载到视频容器中this.$refs.video.$el.appendChild(video)//获取屏幕宽高计算出需要展现的比例letaspectRatio='16:9'//默认横屏//activityDetail变量是我业务中用到的，请自行根据实际情况做调整if(this.activityDetail.style.mode==1){//如果是竖屏模式，动态计算出设备宽高，设定一个比例constsystemInfo=uni.getSystemInfoSync()aspectRatio=systemInfo.windowWidth+':'+systemInfo.windowHeight}letthat=thisthis.videoPlayer=videojs('video',{//视频封面图(activityDetail变量是我业务中用到的，请自行根据实际情况做调整)poster:getImageUrl(this.activityDetail.indexpic),//视频标题(activityDetail变量是我业务中用到的，请自行根据实际情况做调整)title:this.activityDetail.title,width:'100%',height:'100%',playbackRates:[0.7,1.0,1.5,2.0],//播放速度autoDisable:true,preload:'none',//auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频language:'zh-CN',fluid:true,// 自适应宽高muted:false,// 是否静音aspectRatio:aspectRatio,// 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）controls:false,//是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮autoplay:true,//如果true,浏览器准备好时开始回放。 autoplay: "muted", // //自动播放属性,muted:静音播放loop:true,// 导致视频一结束就重新开始。 视频播放结束后，是否循环播放techOrder:['html5','flash'],//播放顺序screenshot:true,controlBar:{volumePanel:{//声音样式inline:false// 不使用水平方式},timeDivider:true,// 时间分割线durationDisplay:true,// 总时间progressControl:true,// 进度条remainingTimeDisplay:true,//当前以播放时间fullscreenToggle:true,//全屏按钮pictureInPictureToggle:true//画中画}},function(){this.on('error',function(){//请求数据时遇到错误console.log('请求数据时遇到错误')})this.on('stalled',function(){//网速失速console.log('网速失速')})this.on('play',function(){//开始播放console.log('开始播放')that.isPlaying=true})this.on('pause',function(){//暂停console.log('暂停')that.isPlaying=false})this.on('timeupdate',function(){})})},//切换播放视频switchPlayVideo(){if(this.isPlaying){//正在播放就暂停this.pauseVideo()}else{//暂停就播放this.playVideo()}},//播放视频playVideo(){this.videoPlayer.play()},//暂停播放视频pauseVideo(){this.videoPlayer.pause()},
五、自定义的样式
.video-display-wrap{position:relative;display:flex;justify-content:center;align-items:center;//播放按钮.play-btn-icon{position:absolute;z-index:998;width:100rpx;height:100rpx;}//视频蒙版.video-mask{position:absolute;z-index:998;width:100%;height:100%;}}
六、视频画中画控制（通常是页面中弹窗打开其他页面，挡住了视频播放区域的时候可以用到）
1.进入画中画
this.videoPlayer.requestPictureInPicture()
2.退出画中画
this.videoPlayer.exitPictureInPicture()
七、注意事项
由于H5在安卓设备里面限制视频一进来就播放，必须用户在页面中就交互动作的时候，才可以播放视频，所以可能设置了播放器自动播放没有效果，可以在页面中绑定一个点击事件，无论用户点哪，就触发播放视频（如果视频未播放的时候），这样模拟自动播放
好像没找到视频本身能点击的事件，就算直接在播放器容器中绑定点击事件也没有效果，所以如果需要实现点击视频能在播放与暂停之间切换的话，可以在视频上面加一个透明的遮罩蒙版，层级要高于播放器，这样在蒙版上绑定点击事件就能操作起来了
文中的activityDetail和resource变量是本人业务中用到的，如果您需要使用，请自行替换。
作者：周星星的学习笔记
链接：https://www.jianshu.com/p/adc1f9f2ba1d
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
