HTML5视频在Android上4:播放全屏然后重定向到另一个网页 - 不工作 [英] html5 video on Android 4: play fullscreen then redirect to another webpage - not working

查看:448
本文介绍了HTML5视频在Android上4:播放全屏然后重定向到另一个网页 - 不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我设计一个HTML5页面的Andr​​oid 4.0智能手机与一个单一的3GPP(或MP4)视频,有打开时自动播放全屏;当影片结束应该重定向到另一个网址。

一些谷歌搜索告诉我,自动运行,在Android 4不再允许的,所以我选择来显示用户必须点击开始播放视频的海报图片。 然后:

  1. 在被调用全屏模式
  2. 在视频应自动启动 (确实开始被用户点击的广告图像)
  3. 当视频完成播放的Andr​​oid应该退出全屏
  4. 最后重定向用户anothe页面。

2和3未工作:调用全屏后用户必须做一套点击开始视频,当视频结束exitfullscreen不起作用(屏幕是黑的和用户必须preSS返回键手机从手机的视频播放器退出)。

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

这是HTML5标记和JavaScript code我用,你可以请帮忙指点我到一个解决方案吗?

谢谢!

 < HEAD>
    <元的charset =UTF-8>
    < META NAME =视口内容=WIDTH =设备宽度;初始规模= 1.0/>
    < META NAME =说明内容=/>
    <冠军>测试< /标题>

    <脚本类型=文/ JavaScript的>

        功能videoEnd(){
            VAR视频=的document.getElementById(视频);
            video.webkitExitFullScreen();
            document.location =htt​​p://www.google.com;
        }

        功能的playVideo(){
            VAR视频=的document.getElementById(视频);
            video.addEventListener('结束',videoEnd,假);
            video.webkitEnterFullScreen();
            video.play();
        }

    < / SCRIPT>
< /头>
<身体GT;
    <视频ID =视频海报=../ IMG / image.jpg的的onclick =的playVideo();>
        <信源SRC =../视频/ videoname.3gpTYPE =视频/ 3GPP/>
    < /视频>
< /身体GT;
 

解决方案

我知道这是一个老帖子,但有人可能会寻找这一点。 个人而言,我只是隐藏了视频元素(一个简单的jQuery $ videoElement.hide())在视频结束后,它会自动使我回浏览器。

我们已经在多个移动设备(iOS和Android),测试了这

我仍然有一个问题,虽然,这是现在我的浏览器似乎全屏(这将导致在我的情况下,其他问题)。

I'm designing an html5 page for Android 4 smartphones with a single 3gpp (or mp4) video that has to autoplay fullscreen when opened; when video ends should redirect to another url .

Some googling told me that autoplay is no more allowed on Android 4, so I chose to display a poster image the user has to click to start the video. Then:

  1. fullscreen mode is invoked
  2. video should automatically start (was indeed started by user clicking on poster image)
  3. when video finish to play Android should exit fullscreen
  4. and finally redirect user to anothe page.

2 and 3 are not working: after invoking fullscreen the user have do another "click" to start video and when video ends exitfullscreen does not work (screen is black and user have to press "back" key on the phone to exit from the phone's video player).

Looks like video.webkitExitFullScreen() and video.play() are ignored on Android 4.

This is the html5 markup and javascript code I'm using, could you please help pointing me to a solution?

Thanks!

    <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>

解决方案

I know this is an old post, but someone may be looking for this. Personally I just hide the video-element (with a simple jquery $videoElement.hide()) after the video finished, which brings me back to the browser automatically.

We have tested this on several mobile devices (iOS and Android).

I still have another problem though, which is that now my browser seems to be fullscreen (which causes other problems in my case).

这篇关于HTML5视频在Android上4:播放全屏然后重定向到另一个网页 - 不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆