一.创建Webview对象
在.vue文件中 创建一个按钮，创建Webview 窗口，VideoPlayer对象 需要调用Webview窗口的append方法将其添加到Webview窗口后才能显示
<button class="size" @tap="createVideoPlayer">创建VideoPlayer对象</button>
data:{
player: null,
},
methods:{
createVideoPlayer() {
// 创建一个新Webview窗口
this.w =plus.webview.create('/hybrid/html/local.html','/hybrid/html/local.html',{
top:'0px',
bottom:'0px',
background:"#ccc",
backgroundColorTop:"rgba(255,0,0,0.5)",
backgroundColorBottom:"rgba(255,0,0,0.5)" // 底部窗口背景色
});
this.w.show(); // 显示窗口
},
}二.创建VideoPlayer对象
注意事项：如果视频地址加载不出来，写入正确的地址，重新运行项目，启动app 就可以解决加载失败问题
详细方法，属性，请参考HTML5+ API Reference
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>测试webview-test</title>
</head>
<body>
<div style="padding-top: 50px;">
<button onclick="play()">play</button>
<button onclick="pause()">pause</button>
<button onclick="seek()">seek</button>
<button onclick="requestFullScreen()">切换到全屏</button>
<button onclick="exitFullScreen()">退出全屏</button>
<button onclick="stop()">停止播放视频</button>
<button onclick="hide()">隐藏视频播放控件</button>
<button onclick="show()">显示视频播放控件</button>
<button onclick="close()">关闭视频播放控件</button>
<button onclick="sendDanmu()">发送弹幕</button>
<button onclick="playbackRate()">设置倍速播放</button>
<button onclick="getVideoPlayerById()">查找已经创建的VideoPlayer对象</button>
</div>
<script>
document.addEventListener( "plusready", function(){
// 扩展API加载完毕，现在可以正常调用扩展API
createVideoPlayer();
}, false );
var player = null;
// 创建视频播放控件
// https://www.w3school.com.cn/i/movie.ogg
function createVideoPlayer() {
if(!player){
player = plus.video.createVideoPlayer('videoplayer', {
src:'https://www.runoob.com/try/demo_source/movie.mp4',
top:'200px',
left:"auto",
width: '90%',
height: '200px',
position: 'static',
autoplay:true,
controls:true,
"enable-danmu":true,
"danmu-btn":true
});
plus.webview.currentWebview().append(player);
}
}
function play(){
player.play();
}
function pause(){
player.pause();
}
function seek(){
player.seek(100)
}
function requestFullScreen(){
player.requestFullScreen(0)
}
function exitFullScreen(){
player.exitFullScreen()
}
function stop(){
player.stop()
}
function hide(){
player.hide()
}
function show(){
player.show()
}
function close(){
player.close()
}
function sendDanmu(){
player.sendDanmu({text:'要显示的弹幕文本',color:'#FF0000'});
}
function playbackRate(){
player.playbackRate(1.5);
}
function getVideoPlayerById(){
var b = plus.video.getVideoPlayerById('videoplayer');
if(b){
console.log('find success!');
alert('success');
} else {
console.log('find failed!');
alert('failed');
}
}
</script>
</body>
</html>想看实际运行效果：HTML5+UNI_APP: 熟悉了解HTML5 + 各个API 的使用，特别是在UNi-APP中。? ? ??
