技术分享_ uniapp H5中播放m3u8视频流

uniapp

发布日期: 2023-05-30 01:52:26

喜欢量: 98 个

阅读次数: 351

我们在项目的pages同级下创建一个html文件，名字随便取，template.h5.html，代码如下：

首先，我们在项目的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>
		
		
		
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		
		<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>
		
		
		<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
		
		
		<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>
		
		<script>
			/*BAIDU_STAT*/
		</script>
	</body>
</html>

```

接下来就是怎么把template.h5.html引入到我们的项目中。我们在pages同级下找到manifest.json，然后选择“web配置”，然后在“index.html模板路径”浏览，选中我们的template.h5.html，这样，我们就把文件引入进来了。
也许细心的小伙伴们会发现我在template.h5.html中引入了DPlayerjs、DPlayerjs、aliplayerjs，那是因为我在这里会用三种方式来实现meu8视频流的播放。
1.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("播放时间改变")
		});
	});
},

```

2.DPlayer
```
// 初始化视频-DPlayer
initDPlayer(url) {
	this.dp = new DPlayer({
		container: document.getElementById("video"),
                live: true, //是否直播
		autoplay: true,//是否自动播放
		lang: 'zh-cn',//设置中文
		video: {
			url: url,
			type: 'hls',
		}
	})
}

```
3.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视频流地址，好了，今天的分享就到此结束，撒花……

转载注明：https://juejin.cn/post/7054090443180474398

QYFeng

http://amtb.info/show/MzI=

本博客所有文章除特別声明外,转载请注明来源佛系程序员 !