视频播放

2020/01/22 功能实现

背景

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

需求

页面ui展示

点击播放手机全屏展示

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

实现

video 标签

<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

Video.js and Vue integration

Video.js Options Reference

Player(tag, optionsopt, readyopt)

最终没有采用 Videojs 是因为功能太强大,生成了很多我不需要的dom节点,包太大,很多其实我都不需要,而且因为引入了他,导致我页面另外一个页面交互直接卡死了。初步定位是耗性能,最后使用了原生的 video 实现。我页面另外一个交互没有任何影响

总结

新用一个标签或者属性的时候,看文档,不断的尝试。看看你需要什么方法,看看有没有你要的方法,坑才多了自然就不吭了

全屏 API


有时候,虽然素未谋面。却已相识很久,很微妙也很知足。在逝去的岁月里,我们在某一刻,共同经历着一样的情愫。

如果喜欢我的话,我们可以互相关注,相互学习的哟!互相鼓励,你的关注是我最大的动力来源

sunseekers

Search

    Table of Contents