admin管理员组文章数量:1659577
主要使用到 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'
持续更新! 本人不才 小结一下…
版权声明:本文标题:videojs使用(画中画 滑动自动播放等video配置方法) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729837462a1214482.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论