关于uniapp在各个端播放流视频的问题

最新推荐文章于 2024-08-27 08:45:00 发布

ʚ杨ɞ

最新推荐文章于 2024-08-27 08:45:00 发布

阅读量6.3k

点赞数

分类专栏：直播技术文章标签：小程序 vue uni-app

本文链接：https://blog.csdn.net/weixin_43387188/article/details/118721573

版权

直播技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在各个端播放流视频的问题

- PC端
- 移动端

PC端

使用hls.js和flv.js
hls目前经过测试支持HTTP协议的m3u8格式的流
效果如下（我使用的是cctv1的m3u8流：http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8）：
在这里插入图片描述
这里我使用的是vue

npm i -S hls.js
打开需要使用插件的组件，写一个video标签

<video style="样式" autoplay controls id="videoElement"></video>

将下载的依赖引入到组件中

import Hls from 'hls.js'

实现方法

if (Hls.isSupported()) {									  //判断当前环境是否支持hls.js
  var videoElement = document.getElementById('videoElement'); //获取到要插入流的video Dom元素
  var hls = new Hls()										  //创建Hls的实例
  hls.loadSource('http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8')   //加载视频流
  hls.attachMedia(videoElement)								  //将这个实例挂载到获取到的Dom上
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    videoElement.play() 								 	  //监听实例中的MANIFEST_PARSED事件，并开始播放视频
  })
}else {
  alert('当前浏览器不支持hls')
}

flv.js的使用方式与hls大同小异，具体的实现方式参照flv.js的git官网即可。