I encountered some problems with the h5 player when working on a live broadcast project.
Let me talk about demand first. Mainly in the micro-browser to open a letter, a video playback window above, below interactive dialogue window, the interface is similar to the FIG
envisioned that the top may be a small window video playback, the following message may be sent. It can be implemented in ios system, but the pitfall is that it can't be implemented on Android. Click video playback, full-screen video directly to a layer covering the top of the page, as shown below
because the main scenario is the use of micro-channel browser, so Ma Ying-jeou to see what the solution is not. Searched,
It is said that it is the X5 kernel browser used by WeChat, which provides the same layer playback function, and only needs to add two attributes to the video tag.
<video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>Tried it, but no success. Because of the tight time, I didn't try to find another way. Attach a link to the document, and see if you have time
https://x5.tencent.com/tbs/guide/web/x5-video.html
https://x5.tencent.com/tbs/guide/video.html
I found the Aliplayer of Jack Ma’s house, solved the problem, and uploaded the code.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title>测试页面</title>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.2.0/skins/default/aliplayer-min.css" />
<!--
<script type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.2.0/aliplayer-h5-min.js"></script>
<script type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.2.0/aliplayer-flash-min.js"></script>
-->
<!--该文件自动适配html5和flash两种模式，若使用指定模式，可单独引入对应的js文件-->
<script type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.2.0/aliplayer-min.js"></script>
</head>
<body>
<div id="J_prismPlayer" class="prism-player"></div>
<div style="font-size:30px;color:green;height:400px;weight:100%;border:3px solid red;">666666</div>
<!— prism-player为h5播放器皮肤的钩子类名，请务必加上 —>
<button id="J_clickToPlay" type="button">播放</button>
<script>
// 初始化播放器
var player = new Aliplayer({
id: "J_prismPlayer", // 容器id
autoplay: true,
isLive: true, //是否是直播
playsinline:true,
controlBarVisibility:'always',
useH5Prism:true, //采用h5模式播放
source: "http:/lalala/83e36bfdf320f29.m3u8",// 视频地址
width: "100%", // 播放器宽度
height: "300px", // 播放器高度
x5_type:'h5', // 启用同层播放
x5_video_position:'top' // 播放窗口在上
});
var clickDom = document.getElementById("J_clickToPlay");
clickDom.addEventListener("click", function(e) {
// 调用播放器的play方法
player.play();
});
// 监听播放器的pause事件
player.on("pause", function() {
//alert("播放器暂停啦！");
});
</script>
</body>
<html>After clicking play, the effect is as follows, the player window and custom div at the same level, so that we can deal with interactive services in custom div a
need to set up additional configuration and features, you can view the official documentation