vue-video-player 使用总结

1、vue-video-player 在x5内核同层html 不显示问题

<video-player class="video-player vjs-custom-skin" ref="videos"// :playsinline="true" :options="playerOptions"@canplay="onPlayerCanplay($event)"@play="onPlayerPlay($event)"@timeupdate="onPlayerTimeupdate($event)"
>
</video-player>onPlayerCanplay (player) {var ua = navigator.userAgent.toLocaleLowerCase()if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {// x5内核let video = document.getElementsByTagName("video")[0]video.setAttribute('x5-video-player-type','h5') // 声明启用同层H5播放器，控制网页内部同层播放，可以在视频上方显示html元素。// video.setAttribute('x5-video-orientation','landscape|portrait') // 播放器支持的方向--跟随手机自动旋转，此属性只在声明了x5-video-player-type=”h5”情况下生效video.setAttribute('x5-video-player-fullscreen','false')  // 进入全屏通知console.log(document.getElementsByTagName("video"))} else {// ios端console.log(document.getElementsByTagName("video")[0])let video = document.getElementsByTagName("video")[0]video.setAttribute('webkit-playsinline', 'true')  //设置ios在微信中内联播放视频 ios9video.setAttribute('playsinline', 'true')    //设置ios在微信中内联播放视频 ios10/ios11}},

注意: x5-video-player-type=”h5” 与:playsinline=“true” 不能同时设置；我也不知道为啥，哎！哎！哎！

2、添加切换清晰度按钮

// 监听播放
onPlayerPlay(){this.$refs.videoPlayer.player.play() // 播放// 播放的时候判断一下 有没有 清晰度这个按钮// !this.$('#vjsControl')if(!document.getElementById('vjsControl')){this.addTool()}
},
addTool(){let that = thisthis.$(".vjs-control-bar").append(`<button class="vjs-control" id="vjsControl">${text}</button>`)let vjsControl = document.getElementById('vjsControl')vjsControl.addEventListener('click',that.resourceClcik)// document.addEventListener()
},
// 切换资源
resourceClcik(){let text = this.$('#vjsControl').text()if(text === '标清') {this.$('#vjsControl').text('超清')// this.playerOptions.sources[0].src = ''} else if(text === '超清') {this.$('#vjsControl').text('标清')// this.playerOptions.sources[0].src = ''}
}

ps:

这种方式实现切换清晰度方法，也是看到一篇博主，用这种方式，给用videoJs 写的video播放器添加的切换清晰度方式；我拿到 vue-vidoe-player 里一看可以用，很是欣喜的；毕竟看了很多博客都是那种直接切换url 播放路径的，没有点击切换清晰度按钮来切换视频源的；

3、vue-video-playey 动态存储播放时间和播放百分比

mounted() {// 监听页面离开时触发let that = thiswindow.addEventListener('unload', function () {// 调用后台接口对事件存储that.setTimes(that.playTime)})
},
methods: {// 当前播放位置发生变化时触发onPlayerTimeupdate(player){// 获取播放时间let currentTime = player.cache_.currentTime// 百分比let num = parseInt(player.cache_.currentTime/player.cache_.duration * 1000) / 10// 标记变量赋值this.playTime = `${currentTime};${num}`},
},
destroyed () {// 判断用户 是否播放if(this.playTime){this.setTimes(this.playTime)}
}

怎么说了，这个video 播放，搞了两三天；换了一拨又一波插件；反正过程是真的曲折；特别是那个分片播放，哎，最后还是采用了 m3u8 格式；（前端直接处理ts文件，可以参考 muxjs 这个轻量库）；
特别是要注意的是，当你做项目时引用了不同播放插件比如 flvjs、CKPlayer.js、videojs 。。。来做实验时，最终确定下来用哪一个的时候，一定要把其他的插件卸干净；或者干脆实验的时候，重新弄一个项目；我当时就碰到了一个问题，最终决定用 m3u8 作为播放源，vue-video-player做播放插件的时候，这个插件死活播放不了 m3u8的视频；
遇到了一个很奇怪的问题，x5内核播放MP4文件的时候，那个currentTime设置不起作用，但是缓存 m3u8 流播放的时候，这个就起作用了，巨坑

vue-video-player 使用总结相关推荐

视频列表html页面,vue + video.js实现视频列表页（多个视频）
vue + video.js实现视频列表页 vue项目中做一个视频列表页,本来用原生video标签来实现,由于考虑到手机浏览器兼容问题,找了很多插件,最后决定用video.js这个插件来实现.Vide ...
html5播放器迅雷,搜狗浏览器HTML5视频播放器插件(HTML5.Video.Player)
一款搜狗浏览器的HTML5视频播放器插件,安装后可以使用HTML5方式播放优酷.土豆.爱奇艺.搜狐视频.迅雷离线.腾讯视频.56视频等网站的视频,避免使用adobe flash player插件,降低 ...
html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...
Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
Unity流水账2：视频播放之Video Player
VideoPlayer组件使用VideoPlayer组件可以将视频文件附加到GameObjecs,并在运行时,在GameObject的Texture上播放它们. 默认情况下,Video Pl ...
Android Video Player. 安卓视频播放器，封装 MediaPlayer、ExoPlayer、IjkPlayer。模仿抖音，悬浮播放，广告播放，列表播放，弹幕
DKVideoPlayer 项目地址:dueeeke/DKVideoPlayer 简介: Android Video Player. 安卓视频播放器,封装 MediaPlayer.ExoPlayer. ...
VR视频播放器Video Player
一.通过blender进行建模 1.下载并进行安装快捷键: ①A:全选 ②X:把场景中所有的组件都删掉,按下X后点击Delete X ,则场景会被清空 ③Shift+A:生成一个物体或 ...
Elmedia Video Player Pro 7.15 中文版强大的mac视频播放器
Elmedia Video Player 是Mac毒搜集到的一款 Mac 多媒体播放器. 它可以播放几乎任何音视频文件类型,无论是 AVI,MP4,FLV,SWF, WMV,MKV,MP3,M4V 等 ...
WordPress插件 Fox Video Player 独家HTML5广告视频播放器插件[更新至v3.0.1]
Fox Video Player 是一款独家HTML5广告视频播放器WordPress插件,方便把你的网站转换成一个多媒体站点,尤其独特的视频插入广告像优酷这样的在视频播放前播放广告,当然你也可以设置 ...
专业音视频播放器：Elmedia Video Player Pro mac中文版
为大家推荐一款超级好用的苹果专用视频播放器,Elmedia Video Player Pro for Mac几乎支持所有的音视频格式,具备修改播放.流式传输.画中画.流传输视频到其他设备.彩色主题.观 ...

vue-video-player 使用总结

1、vue-video-player 在x5内核同层html 不显示问题

2、添加切换清晰度按钮

3、vue-video-playey 动态存储播放时间和播放百分比

vue-video-player 使用总结相关推荐

最新文章

热门文章

vue-video-player 使用总结

1、vue-video-player 在x5内核同层html 不显示问题

2、添加切换清晰度 按钮

3、vue-video-playey 动态存储播放时间和播放百分比

vue-video-player 使用总结相关推荐

最新文章

热门文章

2、添加切换清晰度按钮