Question

我正在为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>

Answer 1

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

这适用于Android网页视图应用程序而非Android网络应用程序。

你可以创建android hook up或android web view client，将值作为变量传递（Query String）并播放来自Android native的视频，在那里你拥有所有控件。

请找到播放视频的代码。

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

干杯

Answer 2

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

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

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

Answer 3

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

在调用“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上播放。

P.S。

如果您想在视频播放结束时重定向，请使用此活动：

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

function doSomething() {
     //your redirect code here
}

Answer 4

似乎在Android的更高版本中，程序化video.play()需要WebView的明确授权。例如

settings.setMediaPlaybackRequiresUserGesture(false);

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

4 个答案: