uni h5端使用video.js

官方最近更新了使用文档，所以本文提供的方法可能不是有效的，反正就自己摸索吧，大概原理，看一遍应该就明白，悟性很重要，教程的更新肯定不如人家开发的快，吸取经验就行了。

uni的h5端video组件，它不支持hsl视频格式，但是目前来说， m3u8格式文件是个常用性较多的了，所以我研究了下uni怎么弄。

首先，官方要求需要创建一个html文件，这个文件和vue-cli的index.html异曲同工，而且位置还可以自由设置，按照开发尿性，放项目根目录应该算是合理的路径了。

内容的话直接copy官方提供的就行了，顺带官方连cdn引入video都弄好了。

官方文件

index.html创建好后去配置文件配置下H5端的index.html路径就行了。

然后在你需要调用视频的vue文件，在对于的生命周期里运行video的方法。

一般来说，大部分都是预先创建好html元素再用js初始化，但是uni它不支持你用原生html元素书写，所以为了和app端分离开来，最好是用 条件编译分隔一下

<!-- #ifdef H5 -->
                <view class="foreshow-video" v-for="(fores,index) in foreshowArr">  
                    <view class="video-js" ref="video">

                    </view>
                </view>
            <!-- #endif -->
            <!-- #ifndef H5 -->
                <video v-for="(fores,index) in foreshowArr" :src="fores.episode[fores.episode.length-1]" :poster="fores.pic" class="foreshow-video" controls></video>
            <!-- #endif -->

h5就用一个view容器，然后for循环出要创建多少个video，其他端直接用uni的video组件。

由于需要用js方法来创建video元素这些，所以我把这些方法都封装成了一个初始化方法，写在了methods中

initVideo() {
    const videos = this.$refs.video;
    videos.forEach((v, i) => {
        const video = document.createElement('video');
        const id = 'video' + i;
        video.id = id;
        video.poster = this.foreshowArr[i].pic;
        video.style = 'width: 100%;height: 100%;';
        video.controls = true;
        const source = document.createElement('source');
        source.src = this.foreshowArr[i].episode[this.foreshowArr[i].episode.length - 1];
        video.appendChild(source);
        v.$el.appendChild(video);
        videojs(id, {
            controlBar: {
                children: [{
                        name: 'playToggle'
                    }, // 播放按钮
                    {
                        name: 'progressControl'
                    }, // 播放进度条
                    {
                        name: 'FullscreenToggle'
                    } //全屏
                ]
            }
        });
    });
}

讲一下这段代码的原理：

for循环所有video容器集合

创建video元素并添加一个唯一的id，我用了index下标来唯一化

设置video.poster 属性，也就是视频首图，这个可以在初始化的时候在option里设置，我这里用的属性设置方式

video.style 设置样式

video.controls 为true，这样才有交互按钮，但是如果宽度不够，按钮会不见很多，后面初始化的时候我手动配置了要显示的

创建source 元素

source.src为视频连接

将source传入video

将video元素传入for循环出来的对应容器

videojs初始化，第一个参数为id，我查了一下，应该可以是dom元素，但是这里我们用id

第二个为option，一个对象，里面有很多参数，自定义按钮显示则是controlBar，它里面有个children数组，数组里面放你要显示的哪些按钮。

然后基本完成了。

如果还想知道更多，可以看下我收集到里这两篇文章：

videojs中文文档详解

videojs插件使用

补充

本来uni的页面，离开就销毁了，但是不知道为什么video第二次进来就会报错，估计video需要自己手动销毁。

我们把videojs()初始化后的函数用data里面的变量保存，比如：

data(){
  return {
    videoPlay:null
  }
}

....省略不写了

this.videoPlay = videojs(id);

uni的页面生命周期：onUnload

在这个里面进行销毁：

onUnload() {
    // #ifdef H5
    if (this.player) {
        this.videoPlay.dispose();
    }
    // #endif
}