vue使用videojs播放mu38

引入videojs

// 安装依赖
npm install vue-video-player --save
npm install videojs-contrib-hls --save

import videojs from "video.js";
import "videojs-contrib-hls";

    //播放视频getVideo(url, index) {var video = document.getElementById(`video${index}`);var that=this;videojs(video,{bigPlayButton: true,textTrackDisplay: false,posterImage: false,errorDisplay: false,controls: true,autoplay: true,hls: {withCredentials: true,},fullscreen: {options: { navigationUI: "hide" },},sources: [{src: url,},],},function () {this.play();var seekingTimes = 0;//直播卡顿加载loading时候触发seekingthis.on('seeking',function(){//正在去拿视频流的路上console.log('seeking', ++seekingTimes)if(seekingTimes >= 8) {that.$router.go(0)}})//直播拿到视频流重新播放时出发seekedthis.on('seeked',function(){seekingTimes = 0//已经拿到视频流,可以播放console.log('seeked')})   this.on("error", function () {console.log("加载错误");that.$router.go(0)});this.on("stalled",function(){console.log("网速异常");setTimeout(() => { that.$router.go(0)}, 10000);})});},

事件监听参考

var playerVideo = videojs("my-player", options, function onPlayerReady() {videojs.log('Your player is ready!');this.on("loadstart",function(){console.log("开始请求数据 ");})this.on("progress",function(){console.log("正在请求数据 ");})this.on("loadedmetadata",function(){console.log("获取资源长度完成 ")})this.on("canplaythrough",function(){console.log("视频源数据加载完成")})this.on("waiting", function(){console.log("等待数据")});this.on("play", function(){console.log("视频开始播放")});this.on("playing", function(){console.log("视频播放中")});this.on("pause", function(){console.log("视频暂停播放")});this.on("ended", function(){console.log("视频播放结束");});this.on("error", function(){console.log("加载错误")});this.on("seeking",function(){console.log("视频跳转中");})this.on("seeked",function(){console.log("视频跳转结束");})this.on("ratechange", function(){console.log("播放速率改变")});this.on("timeupdate",function(){console.log("播放时长改变");})this.on("volumechange",function(){console.log("音量改变");})this.on("stalled",function(){console.log("网速异常");})});

vue使用videojs播放mu38相关推荐

vue使用原生videojs 播放m3u8格式的视频——播放m3u8格式视频（一）
vue使用原生video播放m3u8格式的视频 1.安装依赖 2.页面引入插件(这里我是页面单独引入,减少项目体积) 3.页面中的使用常见问题 4.实现过程 5.实现.m3u8格式视频播放方法 1. ...
使用videojs播放m3u8视频
vue3使用videojs 播放m3u8格式视频 videojs是一个播放视频的js库,可以通过videojs结合videojs-contrib-hls实播放m3u8格式视频.流媒体传输协议(hls) ...
html中 videojs 播放m3u8文件【方式一】
1. 播放效果 2. 实现代码如果你直接打开html播放不了,请更换src,因为http://live3.jogyhg.com/live/jr7owi3l160igq0_03c0e113e94d32 ...
Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）
文章目录 1. Vue+Video.js播放效果图 2. npm安装和引入 3. vue 使用 4. 动态设置video视频的src地址 5. Uncaught (in promise) TypeEr ...
h5 rtmp推荐控件_H5播放Rtmp之videojs播放
一.简介我们看到了HLS播放视频实时性非常差,好的在6-7s,差点的就要10-12s了,也就是人走了,估计视频上还能看到,这对观感效果造成了很大的影响!但是好处就是它是基于http协议文件下载的,所 ...
【uni-app】H5中使用videojs播放器播放视频
前言 uni-app 项目中,uni-app提供的video控件对H5的兼容性不好(该控件的主要使用目标是小程序). H5中使用videojs播放器替换video控件 videojs播放器在uni-a ...
vue自定义音频播放组件_易于创建Vue的自定义音频播放器组件
vue自定义音频播放组件音频更好 (vue-audio-better) Easy to create custom audio player components for Vue.js. 易于为Vu ...
videojs播放m3u8后缀视频Demo
videojs播放m3u8后缀视频Demo 转载自:https://segmentfault.com/a/1190000024447688 <!DOCTYPE html><html ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S ...

vue使用videojs播放mu38

vue使用videojs播放mu38相关推荐

最新文章

热门文章