3

私の最終的な目標は、iDevices で私の Web サイトを表示することです。画像リンクをクリックするとビデオがフルスクリーンで再生され、ビデオが終了すると別の Web ページにリダイレクトされます。たとえそれが私が持っているコードを破棄することを意味するとしても、私は自分の目標を達成するためのあらゆる解決策を受け入れます。

現時点での私の最善の試みは次のとおりです。これは私の現在のテストサイトです

私はこのスタックオーバーフローの投稿をフォローしていました

ラップトップでの結果には満足しています [編集は Chrome では機能しますが、FF 16.0.1 では機能しません。もはやわかりません)、現在、画像をクリックして iDevices (ipad1 & iphone4) でビデオを再生することはできません。 . 私は調査、試行錯誤によってこれを達成しようと何時間も費やしましたが、うまくいきませんでした。

ここに私が取り組んでいるコードがあります:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<meta name="description" content="" />
<title>test</title>

<script type="text/javascript">

    function videoEnd() {
        var video = document.getElementById("video");
        video.webkitExitFullScreen();
        document.location = "http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/jk5%20all/build.html";
    }

    function playVideo() {
        var video = document.getElementById("video");
        video.addEventListener('ended', videoEnd, true);
        video.webkitEnterFullScreen();
        video.load();
        video.play();
    }

</script>
</head>
<body>
<video id="video" poster="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/image.png" onclick="playVideo();">
    <source src="http://www.atxcloud.com/wp-content/uploads/Panos/beerdiaries/RnD/video.mp4" type="video/mp4" />
</video>
</body>
</html>
4

1 に答える 1