我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
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数组,数组里面放你要显示的哪些按钮。
然后基本完成了。
如果还想知道更多,可以看下我收集到里这两篇文章:
补充
本来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
}
评论(5)

学
6
l
木灵鱼儿
2