基于vue的video播放组件

2019独角兽企业重金招聘Python工程师标准>>>

做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属性的文章，

转载于:https://my.oschina.net/tianyuqin/blog/1605203