首页 文章

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

提问于
浏览 次
15

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

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

  • 全屏模式被调用

  • 视频应自动启动（确实由用户点击海报图片启动）

  • 当视频播放完Android后应退出全屏

  • 并最终将用户重定向到其他页面 .

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>
android mobile html5-video

4 回答

  • 0

    我有一些建议可能对你有帮助，

    这将适用于Android Web视图Application而不是android web应用程序 .

    您可以创建android挂钩或android web视图客户端，将值作为变量传递（查询字符串）并播放来自Android本机的视频，您可以在其中拥有所有控件 .

    请找到播放视频的代码 .

    enter code here

public void videoPlayer(String path, String fileName, boolean autoplay){
getWindow().setFormat(PixelFormat.TRANSLUCENT);
//the VideoView will hold the video
VideoView videoHolder = new VideoView(this);
//MediaController is the ui control howering above the video (just like in the default youtube player).
videoHolder.setMediaController(new MediaController(this));
//assing a video file to the video holder
videoHolder.setVideoURI(Uri.parse(path+"/"+fileName));
//get focus, before playing the video.
videoHolder.requestFocus();
if(autoplay){
    videoHolder.start();
}

    }

    如果你想实现一种明亮的海湾然后联系我，我会帮助HTML 5

    干杯

    回复于
  • 1

    我知道这是一个老帖子，但有人可能正在寻找这个 . 就个人而言，我只是在视频结束后隐藏了视频元素（使用简单的jquery $ videoElement.hide（）），这会自动将我带回浏览器 .

    我们已在多个移动设备（iOS和Android）上对此进行了测试 .

    我还有另一个问题，那就是现在我的浏览器似乎是全屏的（在我的情况下会导致其他问题） .

    回复于
  • 0

    我最近遇到了类似的问题 . 经过几个小时的网络搜索，这是我如何使它工作：

    在调用“play（）”方法之前，请使用“load（）”方法 . 所以在你的代码中：

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

    我已经测试了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
}
    回复于
  • 1

    在android的后续版本中，程序化 video.play() 需要来自 WebView 的显式授权 . 例如

    settings.setMediaPlaybackRequiresUserGesture(false);

    回复于

相关问题