最近遇到个问题,uni-app 项目需要使用腾讯云点播,又不想使用原生组件开发模式。所以想到的办法就是使用webview组件嵌入本地网页的方法。
要想打开视频就自动播放,文档上给的办法是设置autoplay 和 muted为true,虽然能自动播放但是是静音播放,不能满足需求。网上找了许久没有发现解决办法。
无意间发现,本地html 使用document.createElement 动态创建video标签后,在实例化播放器就可以实现打开视频自动播放,无需设置静音。基本满足当前的需求,目前测试了IOS 安卓还未测试是否可行,先写在这里,留作记录。
目前只想到这个办法,暂未想到更好的方法。
下面是实现代码webview 嵌入的html代码(伪代码不一定能运行)
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<link href="./css/tcplayer.css" rel="stylesheet" />
</head>
<body>
<div id="videoBox"></div>
</body>
</html>
// 引入js
<script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
<script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script>
var play = -1
var appID = 'appid'
var fileID = ''
var player = null
document.addEventListener('UniAppJSBridgeReady', function () {
// 和外面webview 通讯监听
}
function delclick() {
// console.log('关闭')
Vdispose()
sendMessage()
}
function sendMessage() {
//这是和外层通讯逻辑
console.log('发送信息')
uni.postMessage({
data: {
},
})
//。。。。。
}
//webview.evalJS(playVideo);该函数在webview那个组件调用
function playVideo(info) {
const poster = info.poster
const psign = info.psign
if (player) {
Vdispose()
}
let fileid = info.fileid
play = info.play
// 。。。。。
if (!document.getElementById('player-container-id')) {
//这是主要代码 可以实现自动播放效果
let video = document.createElement('video')
video.setAttribute('id', 'player-container-id')
video.setAttribute('preload', 'auto')
video.setAttribute('playsinline', true)
video.setAttribute('webkit-playsinline', true)
video.setAttribute('x5-playsinline', true)
document.getElementById('videoBox').appendChild(video)
}
//一些逻辑
}
function createPlayer(psign, poster = '', fileid, autoplay = false, controlBar = false) {
player = TCPlayer('player-container-id', {
fileID: fileid,
appID: appID,
autoplay: autoplay,
poster: poster,
psign: psign,
controlBar: getControlConfig(controlBar),
})
player.on('ended', () => {
//一些逻辑
sendMessage()
})
}
function getControlConfig(config = true) {
return {
playToggle: config, //是否显示播放、暂停切换按钮。
progressControl: config, //是否显示播放进度条。
volumePanel: config, //是否显示音量控制。
currentTimeDisplay: config, //是否显示视频当前时间。
durationDisplay: config, //是否显示视频时长。
timeDivider: config, //是否显示时间分割符。
playbackRateMenuButton: config, //是否显示播放速率选择按钮。
fullscreenToggle: config, //是否显示全屏按钮。
QualitySwitcherMenuButton: config, //是否显示清晰度切换菜单。
}
}
function Vplay() {
player.play()
}
function Vpause() {
player.pause()
}
function Vdispose() {
// console.log("销毁")
player.dispose()
player = null
}
</script>