做H5手机端的视频播放器，在期间发现了很多问题，哈哈，也是在不断摸索中成长，废话不多说，放代码：

<template><div class="videoBoxDiv"><video :id="palyId" controls="controls" v-show="isVideoShow"@play="videoPlay()"@canplay="videoCanPlay()"@ended="endVideo()"playsinlinex5-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.palyIdlet vdo = document.getElementById(videoId)this.isVideoShow = truevdo.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属性的文章，