uniapp H5 项目 播放 m3u8格式视频
阐述
在项目中,可能会获取一些直播流地址,比如最常见的就是.m3u8
视频格式。在小程序可以直接使用video
标签就可以直接播放,因为小程序有自己的引擎,可以直接使用。H5页面是运行在浏览器上面的,不能直接播放。
解决方案
安装以下依赖
Dplayer.js、hls.js
npm i dplayer -S npm i hls.js -S
ps:如果版本太高了,可以指定以下版本安装即可。
指定 Dplayer.js
、hls.js
版本
{
"dependencies": {
"dplayer": "^1.26.0",
"hls.js": "^1.1.5",
"i": "^0.3.7",
"npm": "^8.6.0"
}
}
具体实现代码如下:
<template>
<view class="content">
<div id="dplayer" style="height: 450px; width: 800rpx;"></div>
</view>
</template>
<script>
//引入 hls与dplayer 用于解析播放视频
import Hls from 'hls.js'
import Dplayer from 'dplayer'
export default {
data() {
return {
dp: {
}
}
},
mounted() {
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,//阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
video: {
url: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8', //视频地址
// url: 'http://boliu.hbzcyc.com/474975DDEFA/474975DDEFA.m3u8', //视频地址
type: 'customHls',
customType: {
customHls: function(video, player) {
const hls = new Hls() //实例化Hls 用于解析m3u8
hls.loadSource(video.src)
hls.attachMedia(video)
}
},
},
});
},
created() {
},
methods: {
}
}
</script>
<style>
</style>