uniapp一：mui-player：三方 h5 web app
uniapp 使用 mui-player 插件播放 m3u8/flv 视频流_翘翘红的博客-CSDN博客
uniapp 开发的h5项目，需要播放m3u8/flv后缀的视频，网上有很多视频插件，但是样式和效果不尽如人意，博主最后选择mui-player插件：
定制化稍微强一点以及有官方文档可以阅读，官网文档介绍 | MuiPlayer
二：Dplayer.js：三方 h5 web
uniapp项目引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频文件，文末有项目代码可供下载_wang_9909的博客-CSDN博客
在项目中，可能会获取一些直播流地址，比如最常见的就是.m3u8视频格式。在小程序可以直接使用video 标签就可以直接播放，因为小程序有自己的引擎，可以直接使用。H5页面是运行在浏览器上面的，不能直接播放
this.dp = new Dplayer({
//播放器的一些参数
container: document.getElementById('dplayer'),
autoplay: false, //是否自动播放
theme: '#FADFA3', //主题色
loop: true,//视频是否循环播放
lang: 'zh-cn',
screenshot: false,//是否开启截图
hotkey: true,//是否开启热键
preload: 'auto',//视频是否预加载
volume: 0.7,//默认音量
mutex: true,//阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
playbackSpeed: [0.5, 1, 1.5, 2], //可选的播放速率，可以设置成自定义的数组 几倍速
// 自定义右键菜单
contextmenu:[],
ban_drag: true // 缩略底部可拖动进度条，true，隐藏 false显示
video: {
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8 ', //视频地址
type: 'customHls',
customType: {
customHls: function(video, player) {
const hls = new Hls() //实例化Hls 用于解析m3u8
hls.loadSource(video.src)
hls.attachMedia(video)
}
},
},
bulletSecret: { // 随意跳动标签，防伪
enabled: parseInt(this.newconfig.player.enabled_bullet_secret) === 1,
text: this.newconfig.player.bullet_secret.text
.replace("${user.mobile}", this.commentUsers.mobile)
.replace("${user.id}", this.commentUsers.id),
size: bulletSecretFontSize + "px",
color: !this.newconfig.player.bullet_secret.color ?
"red" : this.newconfig.player.bullet_secret.color,
opacity: this.newconfig.player.bullet_secret.opacity,
},
});
// 微信同层播放 :https://blog.csdn.net/superKM/article/details/87603255/
setTimeout(() => {
const dplay = document.querySelector(".dplayer-video");
const u = navigator.userAgent;
let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1;
if (isAndroid) {
dplay.setAttribute("x5-video-player-type", "h5-page");
dplay.removeAttribute("playsinline");
dplay.removeAttribute("webkit-playsinline");
} else {
dplay.removeAttribute("x5-video-player-type", "h5-page");
dplay.setAttribute("playsinline", "");
dplay.setAttribute("webkit-playsinline", "");
}
}, 200);
设置dplayer内部属性：vue 仿抖音视频列表（兼容微信内置X5浏览器）_vue仿抖音_superKM的博客-CSDN博客
dplayer官网：指南 | DPlayer
三：video：uniapp官方video 格式有点限制
video | uni-app官网
-
视频播放格式说明：
- H5平台：支持的视频格式视浏览器而定，一般通用的都支持：mp4、webm 和 ogg。（
<video/>组件编译到 H5 时会替换为标准 html 的 video 标签）。H5端也可以自行在条件编译里使用video.js等三方库，这些库可以自动判断环境兼容以决定使用标准video或flash来播放。 - 小程序平台：各小程序平台支持程度不同，详见各家文档：微信小程序视频组件文档、支付宝小程序video组件、百度小程序视频组件文档、字节跳动小程序视频组件文档、QQ小程序视频组件文档、华为快应用视频组件文档
- App平台： 支持本地视频(mp4/flv)、网络视频地址（mp4/flv/m3u8）及流媒体（rtmp/hls/rtsp）。
- H5平台：支持的视频格式视浏览器而定，一般通用的都支持：mp4、webm 和 ogg。（
h5 video可以加载m3u8格式：h5的video标签播放m3u8格式的视频流
四、HLS 文件视频介绍
原文：浅析HTML5点播m3u8(hls)格式视频和flv.js播放flv视频流_技术分享_五块二
这两年来越来越多的视频应用使用了m3u8格式的视频，因为可以兼容PC、移动端。相比mp4等视频源，m3u8可以减轻服务器压力（按需加载）。HLS是由苹果公司率先提出的一种协议标准，可用于直播。
查看演示：https://www.helloweba.net/demo/2018/hls/
项目地址：https://github.com/video-dev/hls.js
m3u8是一种基于HLS(HTTP Live Streaming) 文件视频格式，它主要是存放整个视频的基本信息和分片(Segment)组成。不同于mp4大文件，m3u8是由一系列的 ts 文件组成，一般一个ts文件大概5-10秒，这些ts文件通过一个.m3u8文件做索引。用户播放视频时，可随意拖动视频进度，会读取相应进度的ts文件继续观看视频，不必等到下载完整的视频。因此在播放m3u8的时候很少有卡顿的现象。
本文只做HLS点播讲解，与直播不同，点播是指视频文件已经在编辑好，随时可播放。
由于HLS是由Apple公司提出的，所以在iOS电脑或手机上，你可以直接使用Safari浏览器的<video>播放m3u8格式视频文件。而其他浏览器则需要借助hls.js来兼容m3u8。
使用hls.js，不需要任何定制的播放器，只需要<video>元素就能播放m3u8
四、如何使用 继续上面video使用
1、加载js和播放元素
在需要放置视频的页面位置上加入video元素和hls.js文件。
<video id="video" controls width="100%"></video> <script src="hls.js"></script>
2、调用hls.js
首先判断浏览器是否支持hls，如果支持就实例化new Hls()，加载m3u8源，然后播放。如果不支持hls，而支持苹果原生应用，则播放另一个m3u8源。
var video = document.getElementById('video');
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
video.addEventListener('loadedmetadata',function() {
video.play();
});
}
运行，试着用PC浏览器和手机访问，你会发现m3u8的播放很流畅
四、在Vue中使用hls.js
// 1、使用Vue框架的同学可以用npm先安装hls。
npm install --save hls.js
// 2、然后添加组件
<video ref="videoRef" width="400" controls></video>
// 3、最后挂载代码：
<script>
import Hls from 'hls.js';
export default {
mounted: function() {
var hls = new Hls();
hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
hls.attachMedia(this.$refs.videoRef);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
this.$refs.videoRef.play();
});
}
}
</script>
五、使用flv.js实现flv格式的监控视频流播放
1、flv.js常用方法
flvjs.isSupported()：判断当前浏览器是否支持播放
flvPlayer = flvjs.createPlayer(mediaDataSource: MediaDataSource, config?: Config)：创建一个播放实例
flvPlayer.attachMediaElement(mediaElement: HTMLMediaElement)：将播放实例注册到video节点
flvPlayer.load()：加载视频
flvPlayer.play()：播放视频
flvPlayer.pause()：视频暂停
flvPlayer.unload()：去除视频加载
flvPlayer.detachMediaElement()：将播放实例从节点中取出
flvPlayer.destroy()：销毁播放实例
2、flv.js简单使用文章来源：https://www.toymoban.com/news/detail-519039.html
// html
<video id="my-player" preload="auto" muted autoplay type="rtmp/flv">
<source src="">
</video>
// 引入flv.js
<script src="./flv.js/flv.min.js"></script>
// 使用flv.js实现播放flv格式流
// 获取video节点
videoElement = document.getElementById('my-player');
if (flvjs.isSupported()) {
flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
url: 'XXXX',//flv格式流地址
},{
enableWorker: false, //不启用分离线程
enableStashBuffer: false, //关闭IO隐藏缓冲区
reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
autoCleanupSourceBuffer: true //自动清除缓存
);
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //加载
flvPlayer.play();//播放
}
// 关闭视频流
flvPlayer.pause();
flvPlayer.unload();
flvPlayer.detachMediaElement();
flvPlayer.destroy();
flvPlayer = null;
rtmp 视频流不支持的，可以转为 flv 视频流（http://1011.hlsplay.aodianyun.com/demo/game.flv）文章来源地址https://www.toymoban.com/news/detail-519039.html
到了这里，关于uniapp m3u8格式视频加载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
