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

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
}
分类: UNI-APP 标签: video.js

评论

全部评论 5

  1. 学
    Google Chrome Windows 10
    怎么修改视频播放失败的提示信息
  2. 6
    6
    Google Chrome Windows 10
    刚开始打开闪屏是怎么回事,绿色的一直闪
  3. l
    l
    Google Chrome Windows 10
    请问一下,放进去之后,是黑屏没有播放,也没有播放的按钮播放,这是怎么回事
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @l可以看下控制台有没有报错,具体问题需要自己摸索,我已经很久不写UNI了
  4. 2
    2
    Google Chrome Windows 10
    放进代码里没有效果啊

目录