关于npm包使用DPayler加载hls插件播放m3u8格式视频

瞎搞前端的小冯

已于 2022-05-13 17:43:54 修改

阅读量915

点赞数

文章标签： npm 音视频 javascript

于 2022-05-13 17:40:12 首次发布

本文链接：https://blog.csdn.net/weixin_44952356/article/details/124756383

版权

关于npm包使用DPayler加载hls插件播放m3u8格式视频

html部分

<template>
	<view class="">
	<div id="dplayer" style="height: 400px; width: 100%;"></div>
	</view>
</template>

script部分

   import Hls from 'hls.js'
   import Dplayer from 'dplayer'
	export default {
	mounted() {
			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: {
					quality: [{
							name: '自动',
							url: 'http://172.16.30.7json/index-f2-v1-a1.m3u8',
							type: 'customHls',
						},
						{
							name: '原画',
							url: 'http://172.16.30.75/test3.mp4',
							type: 'auto',
						},
						{
							name: '流畅',
							url: 'http://172.16.30.75/json/index-f1-v1-a1.m3u8',
							type: 'customHls',
						},
						],
					defaultQuality: 0,
						type: 'customHls',
						customType: {
							customHls: function(video, player) {
								const hls = new Hls() //实例化Hls  用于解析m3u8
								hls.loadSource(video.src)
								hls.attachMedia(video)
							}
						},
							},
			});
	}