【uniapp】(使用webview)引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频_uniapp hls.js-CSDN博客

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight
//引入 hls与dplayer 用于解析播放视频 
// #ifdef H5
import Hls from '@/dplayer/hls.js'
import Dplayer from '@/dplayer/DPlayer.min.js'
// #endif
import { camera_info } from '@/apis/sheep.js';
var wv;//计划创建的webview
export default {
	data(){
		return {
			id: '',
			info: {},
			dp: {},
			weburl: '/hybrid/html/videoPlay.html',
			editInterval: null
		}
	},
	onLoad(option) {
		if(option.id){ this.id=option.id }
	},
	mounted() {
		camera_info({id:this.id}).then(res=>{
			if(res.code==1){
				this.info=res.data;
			
				// #ifdef APP-PLUS
				this.weburl+='?data='+encodeURIComponent(JSON.stringify({ "apiUrl": res.data.url }));
				wv = plus.webview.create("","custom-webview",{
					'kernel': 'WKWebview',
					plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
					'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
				})
				wv.loadURL(this.weburl)
				var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
				setTimeout(function() {
					currentWebview.append(wv);
					// wv = currentWebview.children()[0]
					wv.setStyle({top: 150+statusBarHeight, height: 300})
				}, 100); //如果是页面初始化调用时，需要延时一下
				// #endif
				// #ifdef H5
				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: res.data.url, // 视频地址
						type: 'customHls',
						customType: {
							customHls: function(video, player) {
								const hls = new Hls()  //实例化Hls  用于解析m3u8
								hls.loadSource(video.src)
								hls.attachMedia(video)
							}
						},
					},
				});
				// #endif
			} else{
				this.toast(res.msg);
			}
		});
	},
	methods:{
		
	}
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78