奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 大前端知识 > vue >

Vue+Video.js播放m3u8视频流

时间:2019-05-29 09:54来源:未知 作者:admin
接着,我们在需要播放视频的页面引入js对象
首先,我们需要在vue工程中安装video.js相关依赖。
npm install --save video.js
npm install --save videojs-contrib-hls
然后,我们需要引入videojs的css文件,例如在main.js中引入
import 'video.js/dist/video-js.css'

接着,我们在需要播放视频的页面引入js对象
import videojs from 'video.js'
import 'videojs-contrib-hls'

指定一个video容器,例如:

 

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" poster="../assets/video.png">
    <source src="http://127.0.0.1:7086/aaa/213/stream/1.m3u8" type="application/x-mpegURL">
</video>

最后,我们在mounted节点初始化播放器:

 

videojs('my-video', {
    bigPlayButton: false,
    textTrackDisplay: false,
    posterImage: true,
    errorDisplay: false,
    controlBar: true
}, function () {
    this.play()
})


常用事件

    播放 this.play()
    停止 – video没有stop方法,可以用pause 暂停获得同样的效果
    暂停 this.pause()
    销毁 this.dispose()
    监听 this.on(‘click‘,fn)
    触发事件this.trigger(‘dispose‘)


常用选项

autoplay : true/false 播放器准备好之后,是否自动播放 【默认false】
controls : true/false 是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
height: 视频容器的高度,字符串或数字 单位像素 比如: height:300 or height:‘300px‘
width: 视频容器的宽度, 字符串或数字 单位像素
loop : true/false 视频播放结束后,是否循环播放
muted : true/false 是否静音
poster: 播放前显示的视频画面,播放开始之后自动移除。通常传入一个URL
preload:预加载
‘auto‘ 自动
’metadata‘ 元数据信息 ,比如视频长度,尺寸等
‘none‘ 不预加载任何数据,直到用户开始播放才开始下载
children: Array | Object 可选子组件 从基础的Component组件继承而来的子组件,数组中的顺序将影响组件的创建顺序哦。
(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片

奔三路小程序已改版