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

原创

已于 2024-01-29 16:57:45 修改 · 3.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #javascript #音视频

于 2023-11-15 15:03:57 首次发布

文章介绍了在uni-app项目中如何在template中使用uni-navbarfixed组件，以及在manifest.json中设置iOS的Webview类型。同时详细讲解了在H5和App端如何通过DPlayer插件播放视频，包括引入HLS库进行m3u8格式的解析。

在这里插入图片描述

1、在template中添加

<template>
	<view>
		<uni-navbar fixed="true" title="监控查阅" leftIcon="back"></uni-navbar>
		<view class="pd-lr-10 pd-t-20">
			<!-- #ifdef H5 -->
			<div id="dplayer" class="wp-100 h-550"></div>
			<!-- #endif -->
		</view>
	</view>
</template>

在manifest.json文件源码视图中设置 app-plus -> kernel -> ios 的值为 “WKWebview"或"UIWebview”：

"app-plus": {
   
   
	"kernel": {
   
   
		"ios": "WKWebview"    //或者 "UIWebview"
	},
	// ...
}

2、在script中添加方法：（App&H5端）

<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

最低0.47元/天解锁文章