今天，我给大家分享怎么在uniapp H5项目中播放m3u8视频流。
首先，我们在项目的pages同级下创建一个html文件，名字随便取，我们只是为了在该html里引入我们所需要的js，我在这里就取名叫template.h5.html，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.12/skins/default/aliplayer-min.css" />
</head>
<body>
<!-- 该文件为 H5 平台的模板 HTML，并非应用入口。 -->
<!-- 请勿在此文件编写页面代码或直接运行此文件。 -->
<!-- 详见文档：https://uniapp.dcloud.io/collocation/manifest?id=h5-template -->
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<!-- 引入videojs -->
<script src="https://cdn.bootcss.com/video.js/6.3.3/video.min.js"></script>
<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.11.0/videojs-contrib-hls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
<!-- 引入DPlayerjs -->
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<!-- 引入aliplayerjs -->
<script src="https://g.alicdn.com/de/prismplayer/2.9.12/aliplayer-min.js" type="text/javascript" charset="utf-8"></script>
<div id="app"></div>
<!-- built files will be auto injected -->
<script>
/*BAIDU_STAT*/
</script>
</body>
</html>
接下来就是怎么把template.h5.html引入到我们的项目中。我们在pages同级下找到manifest.json，然后选择“H5配置”，然后在“index.html模板路径”浏览，选中我们的template.h5.html，这样，我们就把文件引入进来了。如下图：
也许细心的小伙伴们会发现我在template.h5.html中引入了DPlayerjs、DPlayerjs、aliplayerjs，那是因为我在这里会用三种方式来实现u3m8视频流的播放。
html部分都是一样的，如下：
<view class="video" id="video"></view>
- videojs方式
// 初始化视频-videoJS
initVideoJS(url) {
let video = document.createElement('video');
video.id = 'video';
video.style = 'width: 100%; height: 100%;';
video.controls = true;
video.setAttribute('playsinline', false) //IOS微信浏览器支持小窗内播放
video.setAttribute('webkit-playsinline',
true) //这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放的video标签的一个属性
video.setAttribute('x5-video-player-type', 'h5') //安卓 声明启用同层H5播放器 可以在video上面加东西
let source = document.createElement('source');
source.src = url;
source.type = 'application/x-mpegURL';
video.appendChild(source);
this.$refs.video.$el.appendChild(video);
let that = this;
that.player = videojs('video', {
poster: '/static/images/video-default.png', // 视频封面图地址
title: '监控视频',
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoDisable: true,
preload: 'none', //auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频
language: 'zh-CN',
fluid: true, // 自适应宽高
muted: false, // 是否静音
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
controls: true, //是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
autoplay: true, //如果true,浏览器准备好时开始回放。 autoplay: "muted", // //自动播放属性,muted:静音播放
loop: true, // 导致视频一结束就重新开始。 视频播放结束后，是否循环播放
techOrder: ["html5", "flash"], //播放顺序
screenshot: true,
controlBar: {
volumePanel: { //声音样式
inline: false // 不使用水平方式
},
timeDivider: true, // 时间分割线
durationDisplay: true, // 总时间
progressControl: true, // 进度条
remainingTimeDisplay: true, //当前以播放时间
fullscreenToggle: true, //全屏按钮
pictureInPictureToggle: false, //画中画
}
}, function() {
this.on("loadstart", function() {
console.log("开始请求数据");
})
this.on("progress", function() {
console.log("正在请求数据");
})
this.on("loadedmetadata", function() {
console.log("获取资源长度完成")
})
this.on("canplaythrough", function() {
console.log("视频源数据加载完成")
})
this.on("waiting", function() {
console.log("等待数据")
});
this.on('error', function() { //请求数据时遇到错误
console.log("请求数据时遇到错误");
});
this.on('stalled', function() { //网速失速
console.log("网速失速");
});
this.on('play', function() { //开始播放
console.log("开始播放");
});
this.on('pause', function() { //暂停
console.log("暂停");
});
this.on('fullscreenchange', (e) => {
console.log("最大化")
});
this.on('timeupdate', function() { //播放时间改变
console.log("播放时间改变")
});
});
},
- DPlayerjs方式
// 初始化视频-DPlayer
initDPlayer(url) {
this.dp = new DPlayer({
container: document.getElementById("video"),
live: true, //是否直播
autoplay: true,//是否自动播放
lang: 'zh-cn',//设置中文
video: {
url: url,
type: 'hls',
}
})
}
- aliplayerjs方式
// 初始化视频-aliplayer
initAliPlayer(url) {
this.player = new Aliplayer({
id: "video",
source: url,
width: "100%",
height: "230px",
autoplay: false,
cover: "/static/images/video-default.png",
isLive: true,
rePlay: false,
playsinline: true,
preload: false,
controlBarVisibility: "click",
useH5Prism: true,
"skinLayout": [{
"name": "bigPlayButton",
"align": "blabs",
"x": 30,
"y": 80
},
{
"name": "H5Loading",
"align": "cc"
},
{
"name": "errorDisplay",
"align": "tlabs",
"x": 0,
"y": 0
},
{
"name": "infoDisplay"
},
{
"name": "tooltip",
"align": "blabs",
"x": 0,
"y": 56
},
{
"name": "thumbnail"
},
{
"name": "controlBar",
"align": "blabs",
"x": 0,
"y": 0,
"children": [{
"name": "liveDisplay",
"align": "tlabs",
"x": 15,
"y": 6
},
{
"name": "fullScreenButton",
"align": "tr",
"x": 10,
"y": 10
},
{
"name": "volume",
"align": "tr",
"x": 5,
"y": 10
}
]
}
]
}, function(player) {
console.log("The player is created", player);
});
this.player.on('error', (error) => {
console.log('error', error);
});
}
其中，方法里面的url指的是u3m8视频流地址，好了，今天的分享就到此结束，撒花……
