做H5手机端的视频播放器,在期间发现了很多问题,哈哈,也是在不断摸索中成长,废话不多说,放代码:
<template> <div class="videoBoxDiv"> <video :id="palyId" controls="controls" v-show="isVideoShow" @play="videoPlay()" @canplay="videoCanPlay()" @ended="endVideo()" playsinline x5-video-player-type='h5' x-webkit-airplay="true" webkit-playsinline="true" > <source :src="videoUrl" > </video> <img v-show="isCanPlay && !isVideoShow " @click="palyVideo()" class="play" src="../../assets/img/palyBtn.png"/> <img v-show="!isVideoShow" class="loadImg" :src="loadImgUrl"/> </div> </template> <script> export default { name: 'video-play', props: { videoUrl: { type: String, defalut: '' }, loadImgUrl: { type: String, defalut: '' }, palyId: { type: String, defalut: '' } }, data () { return { isVideoShow: false, isStop: false, isCanPlay: false } }, mounted () { this.$nextTick(function () { this.videoCanPlay() }) }, methods: { palyVideo () { let videoId = this.palyId let vdo = document.getElementById(videoId) this.isVideoShow = true vdo.play() this.isStop = false }, endVideo () { this.isVideoShow = false }, videoPlay () { this.isStop = false }, videoCanPlay () { this.isCanPlay = true } } } </script> <style lang="less" scoped> .videoBoxDiv{ height: 600px; display: flex; justify-content: center; align-items: center; background: #000; margin-bottom: 20px; position: relative; video{ max-width: 99.9%; max-height: 100%; background: #000; source{ z-index: 1; } } .play{ width: 120px; height: 120px; position: absolute; left: 50%; top: 50%; margin-left: -60px; margin-top: -60px; } .loadImg{ max-width: 100%; max-height: 100%; } } </style>
将播放器做成了组件,方便调用,用了mounted钩子函数来监控视频是否能播放,但是发现在Android手机上好像也没什么效果,依然是在点击播放play() 后再加载的视频。
在Android端的微信和浏览器中的播放效果也是不一样的,在微信中依然是点击进去全屏播放,而且播放完了还有其他的广告出来,看了资料,发现原来是因为腾讯对video做了处理。
在Android的微信端在滚动的同时,video也会出现浮动的现象,使用了x5-video-player-type='h5'这个属性后有改善,没有浮动了,但是微信端的播放也出现了点击进去是全屏,但是播放的范围却减少了和多。
playsinline 和 webkit-playsinline="true" 属性是为了IOS能非全屏播放。
问题还在解决中。。。。。哈哈,对video研究还不是很深,自己挖的坑还是有点多的,如果有大佬有解决方案,欢迎留言
还发现相同的视频加载了几个的时候,第一个播放了-暂停,第二个播的时候会接着第一个暂停的点继续播放。
ps: 找到了一篇有关video属性的文章,
所有评论(0)