gui*_*ras 15 mobile android html5-video
我正在为Android 4智能手机设计一个html5页面,其中包含一个3gpp(或mp4)视频,打开后必须自动播放全屏; 视频结束时应重定向到另一个网址.
一些谷歌搜索告诉我在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)
我最近也遇到了类似的问题。经过几个小时的网络搜索后,我的工作方式如下:
在调用“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)
| 归档时间: |
|
| 查看次数: |
11425 次 |
| 最近记录: |