6

誰かがリンクをクリックしたときに再生したいビデオがあるモバイルサイトを作成しています。

<div id="player"></div>
<a href="#" onclick="DoNav('<?php echo $url; ?>');" title="Click to play video"> <?php echo $result_videos[$i]["camera_name"]; ?> </a>

<script type="text/javascript">
function DoNav(theUrl)
{

  // only add the player if it doesn't yet exist
  if($('#myfileplayer').length == 0) {
    var mydiv = $("#player");
    var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
    mydiv.append(myvideo);
  } else {
    $('#myfileplayer').attr("src",theUrl); 
  }

} 
</script>

iPhoneの場合、これはうまく機能します。ビデオをクリックすると、全画面表示になります。Androidも同様に機能しますが、再生するにはビデオをクリックしてから全画面をクリックする必要があります。再生を押すだけでiPhoneのように全画面表示にすることはできますか？

4

5 に答える 5

6

これはプレーンな Javascript で動作するはずです:

var myVideo = document.getElementById('myVideoTag');

myVideo.play();
if (typeof(myVideo.webkitEnterFullscreen) != "undefined") {
    // This is for Android Stock.
    myVideo.webkitEnterFullscreen();
} else if (typeof(myVideo.webkitRequestFullscreen)  != "undefined") {
    // This is for Chrome.
    myVideo.webkitRequestFullscreen();
} else if (typeof(myVideo.mozRequestFullScreen)  != "undefined") {
    myVideo.mozRequestFullScreen();
}

フルスクリーン命令の前に play() をトリガーする必要があります。そうしないと、Android ブラウザーでフルスクリーンになりますが、再生は開始されません。最新バージョンの Android ブラウザ、Chrome、Safari でテスト済み。

于 2014-06-25T08:17:29.673 に答える
2

私はこれをあきらめました。私の結論は、Android デバイスの html5 ビデオ タグはチャンクを吹き飛ばすということです。一部のデバイスでは機能しますが、他のデバイスでは機能しません。そして、3.x や 4.x のような一般的な基準はなく、ランダムに見えるだけです。特にフラッシュのサポートはもう存在しないため、これがすぐに改善されることを願っています.

奇妙なことに、シンプルに固執するのhrefが最も一貫しているようです。いくつかのコントロールが失われますが、ビデオ タグよりははるかに優れています...少なくとも今のところは.

于 2012-08-04T19:41:08.523 に答える
1

mediaelement.jsをチェックアウトしましたか?

于 2012-07-10T19:08:51.043 に答える
0

次の行に沿って何かを試してください。

document.getElementById('myfileplayer').addEventListener('play', function (e) { this.mozRequestFullScreen ? this.mozRequestFullScreen() : this.webkitRequestFullScreen ? this.webkitRequestFullScreen() : null; }, false);

それか、次のようなものかもしれません。

document.getElementById('myfileplayer').addEventListener('play', function (e) { this.webkitEnterFullscreen(); }, false);

webkitEnterFullscreenVIDEO現在 iOS で動作している要素のフルスクリーン メソッドです。Android デバイスでのサポートについてはわかりません。

mozRequestFullScreenMozillaとwebkitRequestFullScreenGoogle の FullScreen API の実装であり、実質的にすべての DOM 要素でフルスクリーン モードを有効にするために使用されます。

うまくいけば、それが少なくとも作業の出発点になります...

于 2012-07-10T19:36:10.107 に答える