Vue结合Video.js播放m3u8视频流的方法示例_m3u8怎么用

173 浏览量更新于2023-05-11 收藏 41KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

Vue结合结合Video.js播放播放m3u8视频流的方法示例视频流的方法示例

本篇文章主要介绍了Vue+Video.js播放m3u8视频流的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随

小编过来看看吧

首先，我们需要在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>

最后，我们在mounted节点初始化播放器：

videojs('my-video', {

bigPlayButton: false,

textTrackDisplay: false,

posterImage: true,

errorDisplay: false,

controlBar: true

}, function () {

this.play()

})

Video.js中中m3u8视频清晰度切换视频清晰度切换

完成测试代码

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"

data-setup='{}'>

</video>

<br/>

</body>

window.onload=function(){

var videoPanelMenu = $(".vjs-fullscreen-control");

videoPanelMenu.before('<div class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button" aria-live="polite" aria-expanded="false" aria-haspopup="true">'

+ '<div class="vjs-menu" role="presentation">'

+ '<ul class="vjs-menu-content" role="menu">'

+ '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeVideo(1)">普通</li>'

+ '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeVideo(2)">标清 </li>'

+ '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeVideo(3)">高清 </li>'

+ '</ul></div>'

+' <button class="vjs-subs-caps-button vjs-control vjs-button" type="button" aria-live="polite" title="清晰度切换" aria-disabled="false">'

+' <span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">清晰度切换</span>'

+' </button>'

+'</div>'

);

var obj={tag:false,ctime:0};

window.obj=obj;

var myPlayer=videojs.getPlayers()['my_video_1'];

myPlayer.on("timeupdate", function(){

if(window.obj.tag){

videojs("my_video_1").currentTime(window.obj.ctime)

videojs("my_video_1").play();

window.obj.tag=false;

}

//视频打点

var ctime_=videojs("my_video_1").currentTime().currentTime();

if(ctime_==60){

videojs("my_video_1").currentTime(ctime_+1);

//do something

}

});

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38688890

粉丝: 6
资源: 964

会员权益专享

Vue结合Video.js播放m3u8视频流的方法示例

CKplayer2019-5月升级版同时支持mp4,m3u8，PC端安卓端苹果端全部兼容

vue2.0+vue-dplayer实现hls播放的示例

vue-aliplayer-v2:这是一个基于Alipayer开发并封装成vue组件的播放器。可播放rtmp，m3u8，mp4 ....视频。除支持直播流与点播的基础功能外，还支持视频的加密播放，设置切换，直播时移等业务场景等.https

Vue.js与现代前端工作流：Webpack、Babel与Vue.js的完美结合

Vue.js的音视频处理：实现视频播放和音频控制

Vue.js数据可视化实践：结合D3.js和Echarts

前端框架Vue.js中的文字样式调整方法

Vue.js性能调优的几种方法

vue3 使用video.js 播放m3u8

vue使用video.js播放视频

vue vue-video-player无法播放无音频流的m3u8

vue 和 video.js实现播放列表

能播放.m3u8格式的vue视频播放插件

vue2播放m3u8

vue2 video.js

vue 兼容h265视频编码的m3u8视频流

vue使用video.js

vue 使用video.js

vue 播放 m3u8

vue 使用flv.js播放rtsp视频

会员权益专享

最新资源