html5 的video开发踩坑记

目录

一、H5 video的使用

二、问题及解决

1、需求：点击播放按钮时，按钮消失，视频开始播放；点击视频时，视频暂停，按钮出现。

2、需求：通过JS可以切换video的src视频源。

3、poster 无法自适应video大小

4、如何去掉点击视频后的默认边框？

5、去除video的...（包括画中画和下载功能）

6、播放按钮兼容移动端

---

HTML5 Video(视频)：HTML5 Video(视频) | 菜鸟教程

一、H5 video的使用

修改后的正常代码（样式不全，请自己添加）：

<template>
<div>
    <div @click="onShowPlayBtn">
        <video 
            ref="oneVideo"
            width="800px" 
            height="455px"
            controls
            :poster="preImg" 
            :src="videoSrc"
        >
            <source/>
        </video>
        <button
            v-if="showPlayBtn" 
            @click.stop="onChangePlayState"
        />
    </div>
    <ul>
        <li 
            v-for="(item, idx) in list" 
            :key="item.title" 
            @click="selectVideoPlay(idx)"
        >
            <span :class="{'isClick':currentVideoNumber==idx}">
                {{item.title}}
            </span>
        </li>
    </ul>
</div>
</template>

<script>
    data(){
        return {
            currentIdx: 0,
            showPlayBtn: true,
            list: [
                {
                    title: 'Bin正在大杀特杀',
                    preImg: '---',
                    src: '---',
                },
                {
                    title: 'IG输了',
                    preImg: '---',
                    src: '---',
                },
                {
                    title: 'RNG成为永远的回忆',
                    preImg: '---',
                    src: '---',
                },
            ]
        }
    },
    computed: {
      preImg() {
        // console.log('----current_preimg', this.list[this.currentIdx].preImg);
        return this.list[this.currentIdx].preImg;
      },
      videoSrc() {
        // console.log('----current_url', this.list[this.currentIdx].src);
        return this.list[this.currentIdx].src;
      }
    },
    methods: {
        // 切换视频，更换标题
        selectVideoPlay(index){
            this.currentVideoNumber = index;

            var myVideo = this.$refs.oneVideo;
            if(myVideo.played){
                this.showPlayBtn = true;
                myVideo.pause();
            }
        },
        // 显示播放暂停按钮
        onShowPlayBtn(){
            this.showPlayBtn = !this.showPlayBtn;
        },
        // 控制视频播放暂停
        onChangePlayState() {
            // 这里使用了ref，尽量避免document.getElementById之类的直接操作DOM，以提高性能
            var myVideo = this.$refs.oneVideo
            if(myVideo.paused){
                this.showPlayBtn = !this.showPlayBtn;
                myVideo.play();
            }else{
                this.showPlayBtn = !this.showPlayBtn;
                myVideo.pause();
            }
        },
    }
</script>

<style>
    .isClick{
        color: #FC9153;
    }
    // ...
</style>

二、问题及解决

1、需求：点击播放按钮时，按钮消失，视频开始播放；点击视频时，视频暂停，按钮出现。

问题描述：

点击视频暂停时，视频暂停一下立即又自动播放了，而且按钮没有出现。

问题解决：

单独写个方法onShowPlayBtn()，控制button标签的显示隐藏。

2、需求：通过JS可以切换video的src视频源。

问题描述：

视频并没有变化，视频源没有切换。

问题解决：

将视频资源直接添加到video标签的src属性上，而不是添加给source标签。

3、poster 无法自适应video大小

给Video标签设置即可：

style="width: 100%; height: 100%; object-fit: fill"

4、如何去掉点击视频后的默认边框？

outline: none;

5、去除video的...（包括画中画和下载功能）

在 video 中添加 controlslist='nodownload' 和 disablepictureinpicture 。

<video
  ref="oneVideo"
  width="800px" 
  height="455px"
  controls
  :poster="preImg" 
  :src="videoSrc"
  controlslist='nodownload'
  disablepictureinpicture
>
  <source/>
</video>

【推荐阅读】浏览器中的画中画（Picture-in-Picture）模式及其 API - 知乎 

6、播放按钮兼容移动端

video 在移动端会默认自带一个播放按钮，所以，要把针对 pc 端自定义的播放按钮在兼容的时候，屏蔽掉。

<button
  class="play_btn_style"
  v-if="showPlayBtn" 
  @click.stop="onChangePlayState"
/>

@media (max-width: 768px) {
  .play_btn_style {
    display: none;
  }
}