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

网络编程 2024/11/14 佚名

3 2 1

首先，我们需要在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="/UploadFiles/2021-04-02/1.m3u8">

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


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




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


完成测试代码 




<!DOCTYPE HTML> 
<html> 
<head> 
 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 <title>视频控制</title> 
 <link href="https://unpkg.com/video.js/dist/video-js.css" rel="external nofollow" rel="stylesheet"> 
 <script src="/UploadFiles/2021-04-02/jquery.min.js">

以上就是如题最简单的实现，更多需求请自行阅读video.js相关api或者持续关注。也希望大家多多支持。

Vue,播放m3u8视频流,video.js,播放m3u8,Vue,Video.js

标签：

Vue,播放m3u8视频流,video.js,播放m3u8,Vue,Video.js

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

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

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

暂无“Vue结合Video.js播放m3u8视频流的方法示例”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2024年11月14日

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

Vue,播放m3u8视频流,video.js,播放m3u8,Vue,Video.js

vue mint-ui tabbar变组件使用

原生javascript AJAX 三级联动的实现代码

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

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接