LoginSignup
5
5

More than 5 years have passed since last update.

WebView に表示した Video タグをオートプレイ設定する方法

Posted at

WebView上でVideoタグを使って自動で映像を流すようなアプリを Titanium (iPhone) で作っていました.
が,WebView が表示されても自動で映像が流れませんでした.

HTML5 の仕様としては Videoタグには autoplay 属性を指定することで自動再生できるのですが,iPhone だとAppleの制約なのか自動再生はできないようです.

が,擬似的に次のようなコードで実現できるようです.(Apple の審査が通るかは不明です)

app/assets/video.html
<!DOCTYPE html>
<html>
  <head>
    <script src="http://www.google.com/jsapi"></script>
    <script>google.load("jquery", "1.3");</script>
    <script type="text/javascript"> 
    jQuery.noConflict(); var j$ = jQuery;
    function fakeClick(fn) {
        var $a = j$('<a href="#" id="fakeClick"></a>');
            $a.bind("click", function(e) {
                e.preventDefault();
                fn();
            });
        j$("body").append($a);
        var evt, 
            el = j$("#fakeClick").get(0);
        if (document.createEvent) {
            evt = document.createEvent("MouseEvents");
            if (evt.initMouseEvent) {
                evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                el.dispatchEvent(evt);
            }
        }
        j$(el).remove();
    }
    j$(function() {
        var video = j$("#my-video").get(0);
        document.getElementById("my-video").playbackRate = 1;
        fakeClick(function() {
            video.play();
        });
    });
    </script>

  </head>
  <body>
    <video id="my-video" width="340" height="273" src="filename.mp4" />
  </body>
</html>
app/controller/index.js
   $.webview.url = "video.html"
app/view/index.xml
<Alloy>
    <Window class="container">
      <WebView id="webview" />
    </Window>
</Alloy>

参考

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5