当前位置:首页 > 天道酬勤 > 正文内容

vue怎么用(vue格式文件)

张世龙2021年12月21日 23:34天道酬勤1360

注意我! 一起学习前端!

前言:

自从禁用了flash之后,许多项目的视频广播功能都瘫痪了。 以前使用Rtmp的流地址,但必须采用flash插件才能播放。 如果改变hls流地址,视频可以播放,但只能播放各个流。 4画面、6画面、9画面、多个画面一起用流地址播放,而如果没有一点鸡肋就不能播放。

阅读这篇文章,可以实现多屏幕的高速加载播放。 另外,如何停止长期困惑的问题——HLS形式的流地址请求?

实现方式

安装视频播放器

在npminstallvue -视频播放器--savemain.js中导入vue -视频播放器

importvideoplayerfrom ' vue -视频-播放器'

UE.use (视频播放器; 增加对hls.js的支持,安装视频js-contrib-HLS.js

在npminstallvideojs-contrib-HLS.js -组件内的引用

引入美国全国广播公司

导入视频js -混凝土- HLS.JS/SRC /视频JS.HLS JS '组件模板附加代码

模板

视频播放器类=' vjs -自定义-皮肤' :选项='播放器选项' /视频播放器

/template添加脚本代码

导出默认值{

数据()。

返回

播放器选项: {

播放速率: [ 0.7,1.0,1.5,2.0 ],/播放速度

如果为autoplay: true,true,则在浏览器准备好后开始播放。

控制栏:真,//控制栏

预载: '自动',//视频预载

muted: false,//缺省情况下将清除所有音频。

loop: false,//视频结束后重新开始。

语言: ' zh-cn ',

aspectRatio: '4:3 ',//使播放器处于平滑模式,在计算播放器的动态大小时使用这个值。 值必须表示一个比例。 用冒号分隔的两个数字。 例如,“16:9”或“4:3”

如果为fluid: true,true,则视频播放器具有流体大小。 也就是说,将根据集装箱进行缩放。

sources: [{

type : '应用程序/x-mpegurl ',//必须注意这样写

src: ' '

()、

poster: 'xxx ',//你的封面地址

width :文档.文档元素.客户端宽度、

notSupportedMessage: '此视频暂时无法播放。 请允许' Video.js稍后再次复盖无法播放媒体源时显示的默认信息。

(、

源存储器:

(;

() ) for循环将值指定给this.player选项“'源'”“0”“' src '”。 示例:

for (气量=0; idata .数据长度; I ) {2}

this.player选项“源”“0”“src”=数据.数据. URL

}

回调函数

组件示例:

模板

div

视频播放器类='视频播放器自定义皮肤'

射频='视频播放器'

3360 plays在线=' true '

3360选项='播放器选项'

@ play=' onplayerplay ($事件) '

@pause='onplayerpause($event ) )。

@ ended='开放式事件($事件) '

@ waiting=' onplayerwaiting ($ event )。

@ playing=' onplayerplaying ($ event ) )。

@ loaded data=' onplayerloadeddata ($ event ) )。

@ time update=' onplayertimeupdate ($ event ) '

@ can play=' onplayercanplay ($ event ) )。

@ canplaythrough=' onplayercanplaythrough ($ event ) '

@ state changed='已更改播放器状态($ event ) '

@ ready='播放器就绪'

/视频播放器

/div

/template函数示例:

脚本

导出默认值{

方法:

//播放回调

播放器(播放器) {

控制台日志('播放器播放!' 玩家)

(、

//暂停回调

播放器(播放器) {

控制台日志(' player pause!' 玩家)

(、

//视频播放结束后回电话

onplayerended ($事件) {

控制台日志(播放器) )。

(、

由于//DOM要素上的readyState的变更而停止播放

运行时间($事件) {

控制台日志(播放器) )。

(、

//回调开始播放

onplayerplaying($event ) {

控制台日志(播放器) )。

(、

//播放器在当前播放位置下载数据时触发

onplayerloadeddata($event ) {

控制台日志(播放器) )。

(、

//当前播放位置发生变化时触发。

onplayertimeupdate($event ) {

控制台日志(播放器) )。

(、

//介质的就绪状态为HAVE_FUTURE_DATA以上

onplayercanplay{

//console.log (播放顺序! '、玩家)

(、

//介质的就绪状态为HAVE_ENOUGH_DATA以上。 这意味着可以在没有缓冲区的情况下播放整个媒体文件。

onplayercanplaythrough{

//console.log (播放配置文件! '、玩家)

(、

//改变播放状态进行回调

已更改播放器历史记录(播放器历史记录)。

console.log (播放器更新状态,播放器货币状态) ) ) ) )。

(、

//将监听程序绑定到组件就绪状态。 与事件侦听器不同,如果ready事件已经发生,函数将立即启动。

播放器就绪(播放器) {

控制台日志(示例播放器1就绪)、播放器);

}

(、

}

/script

坑点:

1、hls.js依赖软件包需要安装

2、流地址的分配(this .播放器选项[ ' sources ' ] [0] [ ' src ' ]='流地址')

3、视频播放器标签的class如果不设定为“视频播放器vjs-custom-skin”,你导入的样式就不会起作用。

4、css文件的导入方式:导入到组件时,请输入'视频. js/dist /视频- js.CSS '导入'视频-播放器/src/custom -。 video-js.CSS ) )请求)视频播放器/src /自定义- theme.CSS ) )

这样基本上就没什么问题了。 如果看看效果:

四画面,测试流地址

谢谢您的阅读! 关注我,继续更新前置干货!

扫描二维码推送至手机访问。

版权声明:本文由花开半夏のブログ发布,如需转载请注明出处。

本文链接:https://www.zhangshilong.cn/work/26652.html

标签: hlsm3u8vue
分享给朋友:

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。