uniapp h5播放m3u8格式视频
文章描述：
uniapp h5播放视频格式为m3u8的视频
依赖下载安装
Dplayer.js、hls.js
npm i dplayer -S npm i hls.js -S
{
"dependencies": {
"dplayer": "^1.27.0",
"hls.js": "^1.2.1",
"i": "^0.3.7",
"npm": "^8.18.0"
}
}
uniapp
template
<template>
<view class="content">
<div id="dplayer" style="height: 450px; width: 100%;"></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: 'h5.m3u8', //视频地址
type: 'customHls',
customType: {
customHls: function(video, player) {
const hls = new Hls() //实例化Hls 用于解析m3u8
hls.loadSource(video.src)
hls.attachMedia(video)
}
},
},
});
},
created() {
},
methods: {
}
}打包成H5在微信中打开可以播放
发布时间：2022/08/30
发表评论