videojs使用(画中画滑动自动播放等video配置方法)

置顶就只会cv嘛.

已于 2022-08-16 14:12:26 修改

阅读量7.1k

点赞数 4

文章标签：前端 vue video

于 2022-08-15 16:16:39 首次发布

本文链接：https://blog.csdn.net/weixin_53571467/article/details/126345697

版权

主要使用到 vue videojs（实现功能） vant css（实现样式）

Video.js是一款web视频播放器，支持html5和flash两种播放方式

官方网站：

demo 效果:

画中画，实时数据计算，循环播放个数，循环播放组数，快中慢设置，视频音开关，背景音开关，背景音淡入淡出，上下滑动播放视频…

videojs

**为了防止在微信或移动端中使用h5的video标签时被自带的video播放器挤掉，就基于video标签封装一个videoplayer标签，避免冲突。（资源已发布） **

注：主要针对于移动端 pc端可直接使用video标签浏览器中暂时没解决

常用配置：

loop: true, //循环播放
controls: true,  // 控制条是否展示
autoplay: false, // 自动播放
muted: false, // 静音
preload: "auto", // 预加载
			auto 立即加载
			metadata 只加载视频元数据
			none
poster: imgUrl, // 视频未开始之前的图片
sources: [
     {
        src: videoUrl //视频地址
     },
],
......

常用事件：

@loadstart="loadstart($event)" // 客户端开始请求数据
@loadedmetadata="loadedmetadata($event)" // 成功获取视频长度
@play="onplay($event)"  // 开始播放
@pause="onpause($event)" // 暂停播放
@playing="onplaying($event)" // 开始回放
@waiting="onwaiting($event)" // 等待数据
@timeupdate="ontimeupdate($event)" // 获取当前实时播放进度
@canplay="canplay($event)" // 可以播放 但是会因为中间加载而暂停
@ended="ended($event)" // 视频播放结束
@error="error($event)" // //请求数据时遇到错误
......

常用方法：

// 由于是多个video所以多绑定一个下标进行区别
<video-player :ref="'vdplayer' + index"></video-player>

// 获取video
getVideoCtx() {
     return this.$refs['vdplayer' + this.changenav][0].player
},

// 方法
this.getVideoCtx().play() // 播放
this.getVideoCtx().pause() // 暂停
this.getVideoCtx().duration() // 获取视频总时长
this.getVideoCtx().playbackRate() // 获取视频的播放速度
this.getVideoCtx().playbackRate(10) // 修改播放速度
this.getVideoCtx().currentTime() // 获取视频实时播放进度
this.getVideoCtx().currentTime(120) // 设置播放进度
this.getVideoCtx().volume() // 获取视频音量
this.getVideoCtx().volume(0.5) // 修改视频音量 注: 音量设置在[0-1]之间
this.getVideoCtx().currentSrc() // 获取当前视频的url
this.getVideoCtx().src(videoUrl) // 设置当前资源的url
this.getVideoCtx().load() // 重新加载src指定的资源
this.getVideoCtx().reset() // 视频重载
......

video css样式控制：

//播放按钮居中 加入此class类
<video-player class="video-js vjs-default-skin vjs-big-play-centered"></video-player>

// 按钮样式 可自行更改
/deep/ .vjs-big-play-button{
    display: none;
}
// 宽高占比 可自行更改
/deep/ .video-js{
    width: 100%;
    height: 100%;
}
// 暂停时显示按钮 可自行更改
/deep/ .vjs-paused .vjs-paused {
    display: block;
}
......

主要代码（画中画上下滑动播放）：

基于vant中swiper实现滑动播放代码：

// html swiper 通过swiper滑动触发change事件暂停当前 播放下一个
// show-indicators 是否显示指示器 ref 获取当前swiper  duration 动画时长，单位为 ms  loop 是否开启循环播放   change 每一页轮播结束后触发
<van-swipe vertical ref="swiper" :show-indicators="false" @change="onChange" :loop="false" :duration="durationS">
        <van-swipe-item v-for="(ele,index) in list" :key="index" >
            // ref 通过获取下标对应的video
            <video-player 
            	//用到的参
                :ref="'vdplayer' + index"
                :options="playerOptions[index]"
                class="video"
                
                // 用到的配置
                playsinline /*IOS微信浏览器支持小窗内播放*/
                webkit-playsinline /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/
                x5-playsinline="true"
                x5-video-player-type='h5'  /*启用H5播放器,是wechat安卓版特性*/
                x5-video-player-fullscreen='true' /*全屏设置，设置为 true 是防止横屏*/
                
                // 用到的事件
                @play="onplay($event)"
                ...
            ></video-player>
        </van-swipe-item>
    </van-swipe>

// js
data(){
        return{
        	durationS: 500，// swiper滚动动画时长
        	changenav: 0, // 滑动的视频下标
			playerOptions: [], // video视频options
			list:[   // 视频流数组 多个
				{
                    imgUrl: require('./img/1.png'),
                    videoUrl: require('../one.mp4')
                },
                {
                    imgUrl: require('./img/2.png'),
                    videoUrl: require('../two.mp4')
                },
                {
                    imgUrl: require('./img/3.png'),
                    videoUrl: require('../thress.mp4')
                },
                ...
            ],
		}
}

// created 中 循环赋值
created(){
    this.list.forEach((item,index)=>{
        let arr = {
            loop: true, //循环播放
            controls: true,  // 控制条
            autoplay: false, //自动播放
            muted: false, // 静音
            preload: "auto", // 预加载
            poster: item.imgUrl,  // 视频未开始图片
            sources: [
               {
                   src: item.videoUrl //视频地址
               },
             ],
       }
       this.playerOptions.push(arr)
	})
},
    
//methods方法  滑动轮播图时 获取视频下标
onChange(ind) {
    this.getVideoCtx().currentTime(0) 
    this.getVideoCtx().pause() // 先暂停滑动之前的视频
    this.changenav = ind;  // 在赋值下标获取滑动到的视频 并直接播放
    this.handlePlay()
},
// 获取video
getVideoCtx() {
	return this.$refs['vdplayer' + this.changenav][0].player
},
// 播放事件
handlePlay() {
     this.getVideoCtx().play()
},

基于css实现画中画效果代码：

// html
// 画中画 通过先右上角显示一个小div中间嵌套一个video播放器 到需要显示时通过改变外部盒子大小 内部自适应 d等到达最大时隐藏此div 调用vant中swiper的next事件 播放下一个视频 实现画中画
<div class="pictures" :style="slideStyle">
       <video-player></video-player>
</div>

// js
data(){
        return{
        	// 通过定位 把盒子定在右侧-100%的位置 设置初始样式
			slideStyle: {
                width: '200px',
                height: '300px',
                right: '-100%',
                top: '12%',
                transition: 'none'
            },
		}
}

// 到需要显示小屏画中画的时候改变他的样式
this.slideStyle.right = 0 + 'px'
this.slideStyle.transition = 'right 1s'

// 到需要画中画变大时再次改变样式
this.slideStyle.width = 100 + 'vw'
this.slideStyle.top = '6%'
this.slideStyle.height = 'calc(100vh - 48px)'
this.slideStyle.transition = 'width 1s'

// 到最大时再次修改样式回归初始值 并调用swiper的next方法播放下一个视频
this.durationS = 0 // 把切换动画设置0s 直接播放 不要动画 播放后在把动画回归
this.$refs.swiper.next()
this.slideStyle.right = '-100%'
this.slideStyle.width = '200px'
this.slideStyle.height = '300px'