• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

uni h5端使用video.js

355 4

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

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
}
15
  • 本文分类:UNI-APP
  • 本文标签:video.js
  • 流行热度:已超过 355 人围观了本文
  • 最后更新:2020年11月23日 - 21时53分50秒
  • 发布日期:2020年05月25日 - 21时34分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

评论(4)

    6

    刚开始打开闪屏是怎么回事,绿色的一直闪

    l

    请问一下,放进去之后,是黑屏没有播放,也没有播放的按钮播放,这是怎么回事

      木灵鱼儿

      @l 可以看下控制台有没有报错,具体问题需要自己摸索,我已经很久不写UNI了

    2

    放进代码里没有效果啊

微信收款码
微信收款码