ライブブロードキャストプロジェクトで作業しているときに、h5プレーヤーでいくつかの問題が発生しました。
まず需要についてお話します。主に、手紙を開くためのマイクロブラウザ、インタラクティブダイアログウィンドウの下の上のビデオ再生ウィンドウにおいて、インターフェースは
、上部が小さなウィンドウのビデオ再生であり得ると想定される図と同様であり、以下のメッセージが送信され得る。iOSシステムで実装できますが、Androidでは実装できないという落とし穴があります。
主なシナリオはマイクロチャネルブラウザの使用であるため、以下に示すように、ビデオ再生、フルスクリーンビデオをページの上部をカバーするレイヤーに直接クリックします。馬英九は解決策が何でないかを確認します。検索、
同じレイヤー再生機能を提供し、ビデオタグに2つの属性を追加するだけでよいのはWeChatで使用されるX5カーネルブラウザーであると言われています。
<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
馬雲の家のアリプレイヤーを見つけて問題を解決し、コードをアップロードしました。
<!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>再生をクリックすると、効果は次のようになります。プレーヤーウィンドウとカスタムdivは同じレベルにあるため、カスタムdivでインタラクティブなサービスを処理し、
追加の構成と機能を設定する必要があります。公式ドキュメントを表示できます。