aliplaye,rH5同层播放器,解决Android端wap视频点击全屏问题

做直播项目时候在h5播放器方面遇到一些问题。
先说需求。主要是在微信浏览器打开,上面是视频播放窗口,下面是对话互动窗口,界面类似下图
aliplaye,rH5同层播放器,解决Android端wap视频点击全屏问题_第1张图片
预想的是,上边视频可以小窗播放,下面可以发送消息。在ios系统是可以实现,但坑爹的是,在安卓上没办法实现。点击视频播放后,直接一个全屏video层覆盖在页面最上方,如下图
aliplaye,rH5同层播放器,解决Android端wap视频点击全屏问题_第2张图片
因为主要是使用场景是在微信浏览器,所以看看小马哥有什么解决的办法没有。搜了一下,

说是微信使用的X5内核浏览器,提供了同层播放功能,只需要在video标签添加两个属性就可以

<video id="test_video" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>

试了下,没有成功。因为时间紧迫,没再去摸索着试,去找别的路了。附上文档链接,有时间了在看看

https://x5.tencent.com/tbs/guide/web/x5-video.html

https://x5.tencent.com/tbs/guide/video.html


找到了马云家的aliplayer,解决了问题,上代码

  
<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-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;">666666div>
<!— prism-playerh5播放器皮肤的钩子类名,请务必加上 —>
<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>

点击播放后,效果如下,播放器窗口和自定义的div在同一层,这样我们就可以在自定义div处理交互业务了
aliplaye,rH5同层播放器,解决Android端wap视频点击全屏问题_第3张图片
需要设置其他配置和功能的,可以查看官方文档

https://player.alicdn.com/aliplayer/docs/properties.html

你可能感兴趣的:(aliplaye,rH5同层播放器,解决Android端wap视频点击全屏问题)