背景

项目中sdk的视频播放在 ios 和安卓手机表现形式不一致，不满足产品需求。针对ios手机单独做处理，也就是借用原生的 video 实现

需求

页面ui展示

点击播放手机全屏展示

中途退出全屏或者播放结束展示（页面停留在退出那一帧

实现

<video
  :poster="videoObj.coverUrl"// 展示视频第一帧
  :src="videoObj.playUrl"
  ref="video"
  webkit-playsinline="true"
  playsinline="false"//是否小屏播放
  x-webkit-airplay="true"
  x5-video-player-type="h5" /启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true"/*全屏设置，设置为 true 是防止横屏*/
  x5-video-ignore-metadata="true"
  width="100%"
  height="100%"
></video>
// 自己写的播放按钮，用来控制，点击视频全屏播放
<img class="video-play"
      v-show="!videoObj.hiddenVideoPlay"
      @click="playVideo_ios"
      :src="videoImg" />

没有加 controls 属性，去掉控制条

视频H5 video标签最佳实践

  watch: {
    'videoObj.hiddenVideoPlay': {
      handler(newVal, o) {
        if (!newVal) {
          this.$refs.video.pause()// 播放视频
        } else {
          this.$refs.video.play()//暂停视频播放
        }
      },
      deep: true
    }
  },
    mounted() {
    this.showVideoPlay()
  },
    methods: {
    playVideo_ios() {// 点击播放按钮控制视频的播放
      this.$refs.video.play()
      this.$emit('videoStatus', this.videoObj, 'play')//告诉父组件，修改hiddenVideoPlay状态，隐藏播放按钮
    },
    showVideoPlay() {
      // 监听开始播放事件
      this.$refs.video.onplay = () => {
        console.log(this.$refs,'查看video 上面的方法和属性');
        const video = this.$refs.video
        if (video.webkitEnterFullscreen) {
          video.webkitEnterFullscreen()//播放的时候全屏展示
        } else if (video.webkitEnterFullScreen) {
          video.webkitEnterFullScreen()////播放的时候全屏展示
        } else {
          console.log('没有全屏', video)
        }
      }
      // 监听暂停
      this.$refs.video.onpause = () => {
        console.log('暂停')
        if (this.videoObj.hiddenVideoPlay) {
          this.$emit('videoStatus', this.videoObj, 'pause')//告诉父组件，修改hiddenVideoPlay状态，显示播放按钮
        }
      }
      // 结束播放
      this.$refs.video.onend = () => {
        console.log('结束播放')
        if (this.videoObj.hiddenVideoPlay) {
          this.$emit('videoStatus', this.videoObj, 'pause')//告诉父组件，修改hiddenVideoPlay状态，显示播放按钮
        }
      }
    }
  }
  // 样式修改
  .video-img {
  width: 230px;
  height: 170px;
  position: relative;
  margin-bottom: 16px;

  .video-play {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  video {
    object-fit: cover;
  }
  }

因为只考虑 ios 手机，所以兼容性相对而言，比较容易处理。再加上同事在疫情期间做了很多关于 video 的视频播放处理，要感谢她，帮我把坑踩平了，我只要

借用第三方插件

  <video ref="videoPlayer" class="video-js" :poster="videoObj.coverUrl">
    <source :src="videoObj.playUrl && videoObj.playUrl" type="video/mp4" />
  </video> 
  mounted() {
    this.showVideoPlay()
  },
  methods:{
    showVideoPlay(e) {
      let _this = this
      setTimeout(() => {
        // 播放参数
        let options = {
          controls: true, // 是否显示底部控制栏
          preload: 'auto', // 加载<video>标签后是否加载视频
          width: '230',
          height: '170'
        }
        this.player = this.$video(this.$refs.videoPlayer, options, function onPlayerReady() {
          console.log('onPlayerReady', this)
          // 音频开始播放
          this.on('play', () => {
            console.log('play ')
          })
          // 音频暂停播放
          this.on('pause', function() {
            console.log('视频暂停播放')
          })
        })
      }, 500)
    }
  }
  // 修改第三方默认样式，尽可能的满足UI
    .vjs-big-play-button {
    font-size: 20px;
    line-height: 40px;
    height: 40px;
    width: 40px;
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    padding: 0;
    cursor: pointer;
    opacity: 1;
    border: 1px solid #fff;
    background-color: #2b333f;
    background-color: rgba(43, 51, 63, 0.7);
    border-radius: 50%;
  }

  .vjs-playing .vjs-big-play-button {
    display: none;
  }
  .vjs-poster {
    background-size: cover;
  }
  .vjs-paused .vjs-control-bar {
    display: none;
  }

如何定位修改动态变化的第三方样式？？比如videojs