uniapp H5 项目 播放 m3u8格式视频

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>

播放结果