web-dev-qa-db-ja.com

フルスクリーンiPhoneビデオを無効にする

数日続けてこの問題に苦労しています...

IPhoneのSafariでビデオのフルスクリーン再生を無効にする方法または「ハック」はありますか。もちろん、すでに「webkit-playsinline」属性を試しましたが、これは自分のアプリでのみ機能します。

見る：

<video class="" poster="" webkit-playsinline>
    <source src="" type="video/ogg" preload="auto">
    <source src="" type="video/mp4" preload="auto">                
</video>

また、ビデオをキャンバスに配置しようとしましたが、キャンバスのソースとしてビデオに見えるため、drawImage（）メソッドは現在iOSではサポートされていません。

私が使用できる他の方法や代替技術はありますか？それとも、ここ数日間本当に時間を無駄にしましたか？

iphoneioshtml5videocanvas
26
Sebass van Boxel

IOS 10以降

AppleはついにiOS 10のすべてのブラウザでplaysinline属性を有効にしたので、これはシームレスに動作します：

_<video src="file.mp4" playsinline>
_

IOS 8およびiOS 9

実際に.play() 'ingする代わりに、ビデオをskimmingで再生をシミュレートすることで、この問題を回避できます。

要するに、 iphone-inline-video を使用して、再生とオーディオ同期（ある場合）を処理し、_<video>_を正常に機能させ続けます。

25
fregante
    <div id="video-player">
        <video src="http://movies.Apple.com/media/us/html5/showcase/2011/demos/Apple-html5-demo-tron-us_848x352.m4v"></video>
        <p><a href="javascript:playPause();">Play/Pause</a></p>
   </div>

   <script type="text/javascript">
        // intercept and cancel requests for the context menu
        var myVideo = document.querySelector('video');
        myVideo.addEventListener("contextmenu", function (e) { e.preventDefault(); e.stopPropagation(); }, false);

        // hide the controls if they're visible
        if (myVideo.hasAttribute("controls")) {
            myVideo.removeAttribute("controls")   
        }

        // play/pause functionality
        function playPause() {
            if (myVideo.paused)
                myVideo.play();
            else
                myVideo.pause();
         }

         // essentially you'll have to build your own controls ui
         // for position, audio, etc.

    </script>

アイデアは次のとおりです。

  1. ユーザーがコンテキストメニューにアクセスできないようにする（コントロールを表示する）
  2. 表示される可能性のあるプレーヤーコントロールを非表示にします

欠点は、独自のプレーヤーUIを実装する必要があることですが、それほど複雑ではありません

*このコードは、問題を解決する方法を示すことのみを目的としており、ライブアプリケーションで使用するためのものではありません。

主題に関するもう少しの研究は見つけます：

webkit-playsinlineビデオ要素がフルスクリーンではなくインラインで再生されることを示します。

関連タグ「ビデオ」可用性iOS 4.0以降で利用可能。 （有効UIWebViewでのみ、allowsInlineMediaPlaybackプロパティがYESに設定されている場合） source

Safariでビデオプレーヤーを使用することはできません。

Video on Canvasのガイドはありますが、ご存知のようにIOS yet： video on canvas ではサポートされていません

このドキュメントでは、IOSのモバイルメディアコンテンツに関する現在の制限を要約しています。 モバイルビデオステータス

16
web_bod

私の理解では、iOSは常にビデオを全画面で再生します。 AppleのWebサイトでは、エンコードされた画像データとJavascript描画を使用して、ビデオのような再生を行いました。ここに彼らがそれをした方法の内訳があります：

https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI

2
Dithermaster