vue播放直播流
程序员文章站
2022-03-07 20:18:55
vue播放m3u8视频流npm 下载npm install dplayer --savenpm hls.js --save在mina.js中 window.Hls = require('hls.js')在用到需要视频播放的页面import DPlayer from 'dplayer';
vue播放m3u8视频流
- npm 下载
npm install dplayer --save
npm hls.js --save
- 在mina.js中
window.Hls = require('hls.js')
- 在用到需要视频播放的页面
<!-- 引入插件 -->
import DPlayer from 'dplayer';
<!-- 设置容器 -->
<div id="dplayer" style="width:100%;height:100%"></div>
data(){
rerutn{
dplayer:null
}
}
mounted() {
this.dplayer = new DPlayer({
container: document.getElementById('dplayer'),
live: true, //是否直播
autoplay: true, //是否自动播放
lang: "zh-cn", //设置中文
video: {
url:"http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8",
type: "hls", //这一步必须要写,播放直播流
}
});
}
测试流
CCTV1:http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
不知名:https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8
测试视频流是否可用 去看看
本文地址:https://blog.csdn.net/weixin_45374947/article/details/107287678
上一篇: 图像处理(C++ CImage class)学习笔记
下一篇: 校园导航
推荐阅读
-
钉钉群直播怎么设置标清播放? 钉钉群直播画质设置方法
-
vue 使用vue-video-player播放hls格式视频
-
Vue 莹石摄像头直播视频实例代码
-
详解vue2.0+vue-video-player实现hls播放全过程
-
vue2.0+vue-dplayer实现hls播放的示例
-
springcloud Springboot vue.js Activiti6 前后分离 跨域 工作流 集成代码生成器 shiro权限
-
vue瀑布流组件实现上拉加载更多
-
vue实现瀑布流组件滑动加载更多
-
Vue项目中使用better-scroll实现一个轮播图自动播放功能
-
Springboot Activiti6 工作流 集成代码生成器 shiro 权限 vue.js html 跨域 前后分离