Android 4上的html5视频:全屏播放然后重定向到另一个网页 - 无法正常工作

gui*_*ras 15 mobile android html5-video

我正在为Android 4智能手机设计一个html5页面,其中包含一个3gpp(或mp4)视频,打开后必须自动播放全屏; 视频结束时应重定向到另一个网址.

一些谷歌搜索告诉我在Android 4上不再允许自动播放,所以我选择显示用户必须点击以启动视频的海报图像.然后:

  1. 调用全屏模式
  2. 视频应该自动启动(确实是由用户点击海报图片开始的)
  3. 视频播放完Android后应退出全屏
  4. 最后将用户重定向到其他页面.

2和3不起作用:在调用全屏后,用户再次进行"点击"以启动视频,当视频结束时,exitfullscreen不起作用(屏幕为黑色,用户必须按下手机上的"后退"键才能退出手机视频播放器).

在Android 4上看起来video.webkitExitFullScreen()video.play()被忽略.

这是我正在使用的html5标记和javascript代码,你能帮我指点一个解决方案吗?

谢谢!

    <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.google.com";
        }

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

    </script>
</head>
<body>
    <video id="video" poster="../img/image.jpg" onclick="playVideo();">
        <source src="../video/videoname.3gp" type="video/3gpp" />
    </video>
</body>
Run Code Online (Sandbox Code Playgroud)

Vla*_*lip 0

我最近也遇到了类似的问题。经过几个小时的网络搜索后,我的工作方式如下:

在调用“play()”方法之前,请使用“load()”方法。所以在你的代码中:

    function playVideo() {
        var video = document.getElementById("video");
        video.addEventListener('ended', videoEnd, false);
        video.webkitEnterFullScreen();
        video.load();
        video.play();
    }
Run Code Online (Sandbox Code Playgroud)

我在 android 2.2、2.3 和 iPhone 3 上进行了测试,它可以工作。不过android 4.0好像不能玩。

聚苯乙烯

如果您想在视频播放完毕时重定向,请使用此事件:

var video = document.getElementById("video");
video.addEventListener("ended",doSomething,true);

function doSomething() {
     //your redirect code here
}
Run Code Online (Sandbox Code Playgroud)