uni-app使用HTML5+ VideoPlayer API -- UNI_APP（七）

前言：本文所有demo，均是uni-app 真机联调的功能截图一.打开关闭蓝牙1.打开openBluetoothAdapterplus.bluetooth.openBluetoothAdapter({success(e) {Object.keys(e).forEach(key => {console.log("success=>", key, e[key]);})},fail(e)

wax9092

2206人浏览 · 2022-05-09 21:57:30

wax9092 · 2022-05-09 21:57:30 发布

一.创建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中。