vue播放m3u8,
为什么要使用video.js？
1.PC浏览器不支持视频直接播放m3u8格式的视频。
2.手机上各种浏览器定制的视频界面风格不统一，直接编写原生js控件视频兼容性差。
3.video.js解决了以上两个问题，还可以暴露各种视频状态界面，优化体验。
核心代码：
！DOCTYPE html html标题视频支持流媒体直播实例/title link href= ./video.css？v=BCD 2 ce 1385 rel= style sheet /head body video id= room video class= video-js vjs-default-skin vjs-big-play-centered x-WebKit-airplay= allow poster= WebKit-play in line play X5-video-player-type= H5 X5-video-player-全屏= true preload= auto source src=/chat/playlist。m3u 8 type= application/x-mpeg ur/video . js？v=fc 5104 a2 ab 23 /script script src= ./videojs-contrib-hls.js？v=c 726 b 94b 9923 /script script type= text/JavaScript var my player=videojs(房间视频，{ bigPlayButton : false，textTrackDisplay : false，posterImage: true，errorDisplay : false，controlBar : false }，function(){ console。把这个记录下来。on( loaded metadata)，函数(){ console。日志(“加载的元数据”)；//加载到元数据后开始播放视频开始视频()；}) this.on(ended ，function(){ console。log( ended )})这个。on(第一次播放，函数(){控制台。日志(第一次播放)})这个。on( loadstart ，function(){ //开始加载控制台。log( loadstart )})这个。on( loaded data ，function(){ console。log( loaded data )})这个。on( seeking ，function(){ //正在去拿视频流的路上控制台。log( seeking )})这个。on( seeked ，function(){ //已经拿到视频流，可以播放控制台。log( seeked )})这个。on( waiting ，function(){ console。log( waiting )})这个。on( pause ，函数(){ console。日志(暂停)})这个。on( play ，function(){ console。log( play )}))；var isVideoBreak函数开始视频(){我的播放器。play()；//微信内全屏支持文档。getelementbyid(“房间视频”)。风格。宽度=窗口。屏幕。宽度 px ；文档。getelementbyid(“房间视频”)。风格。高度=窗口。屏幕。高度 px ；//判断开始播放视频，移除高斯模糊等待层var isVideoPlaying=setInterval(function(){ var current time=my player。当前时间()；if(currentTime 0){ $( .vjs-poster’).移除();清除间隔(isVideoPlaying)；} },200) //判断视频是否卡住，卡主3s重新负荷视频var lastTime=-1，尝试次数=0；清除间隔(isVideoBreak)；is video break=setInterval(function(){ var current time=my player。当前时间()；控制台。日志(当前时间当前时间上次时间上次时间)；if(currentTime==lastTime){ //此时视频已卡主3s //设置当前播放时间为超时时间，此时视频会在播放()后把当前时间设置为0我的玩家。当前时间(当前时间10000)；我的球员。play()；//尝试5次播放后，如仍未播放成功提示刷新if( tryTimes 5){ alert(您的网速有点慢，刷新下试试);尝试次数=0；} }否则{ last time=current times=0；} },3000)}/脚本/正文/html源码请移步github:
视频支持流媒体直播实例
附：
一.视频状态分析：
事件
持续时间变化
结束
第一部戏
全屏更改
loadedalldata
loadeddata
已加载元数据
负载启动
中止
玩
进步
seeked
寻找
时间更新
体积变化
等待
调整继承的大小
当前时间()可以用来发辅助判断视频播放情况
二.视频加载优化：
通过不初始化录像无用组件的方式，提高录像加载速度
var myPlayer=videojs(roomVideo ，{ bigPlayButton : false，textTrackDisplay : false，posterImage: true，errorDisplay : false，controlBar : false }，function(){ })；未简化之前：
简化后：
三.你可能也会遇到的错误error
错误1：
{代码：4,消息："没有找到此媒体的兼容源。"}
解决：去掉录像标签的data-setup={} ，只保留射流研究…的初始配置
错误2：
视频. js未捕获的类型错误：无法读取未定义的属性“一”
解决：
正确
var myPlayer=videojs(roomVideo ，{ bigPlayButton : false，textTrackDisplay : false，posterImage: false，errorDisplay : false，控制栏：{ captions button:false，chaptersButton: false，subtitlesButton:false，liveDisplay:false，playbackRateMenuButton:false } }，function(){ console。log(this)}；错误
var myPlayer=videojs(roomVideo ，{ children : { bigPlayButton : false，texttrackplay:false，posterImage: false，errorDisplay : false，control bar:{ captions button:false，chaptersButton: false，subtitlesButton:false，liveDisplay:false，playbackRateMenuButton:false } }，function(){ console。log(this)}；到此这篇关于视频。射流研究…支持m3u8格式直播的实现示例的文章就介绍到这了，更多相关视频。射流研究…支持m3u8内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。