我遇到了HTML5视频的currentTime属性的问题。我的小程序根据设备分辨率提供不同的视频(不同的分辨率)。我想在每个window.onload,window.resize和window.orientationchange-Event之后检查设备分辨率。在这些事件之后,可能会提供新视频(使用不同的更合适的分辨率)。我不想再次在第二个0开始视频,因此我试图在事件发生之前捕获视频的当前时间。我的解决方案在IE 10中运行良好。但是所有其他浏览器都失败了......我不知道为什么......
请不要吝啬......我对所有这些网络内容都很陌生,老实说我会尽力而为。
希望你们中的任何人都可以帮助我......
这是我的代码:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum- scale=1">
</head>
<body>
<video id=videoPlayer controls="controls"> </video>
<script>
var pixelRatio = 1.0;
var availScreenWidth;
var availScreenHeight;
var videoResolution;
var type;
var video = document.getElementById('videoPlayer');
var pos;
window.onload = updateVideo;
window.orientationchange = updateVideo;
window.onresize = updateVideo;
function updateVideo(){
pos = video.currentTime;
updateResolution();
if(availScreenWidth <800){
videoResolution = '640x360';
}
if(availScreenWidth >=800 && availScreenWidth < 1137){
videoResolution = '960x540';
}
if(availScreenWidth >=1137 && availScreenWidth < 1367){
videoResolution = '1280x720';
}
if(availScreenWidth >=1367 && availScreenWidth < 1681){
videoResolution = '1600x900';
}
if(availScreenWidth >= 1681){
videoResolution = '1920x1080';
}
if (video.canPlayType("video/webm") == 'maybe' || video.canPlayType("video/webm") == 'probably') {
type = '.webm';
}
else if (video.canPlayType("video/mp4") == 'maybe' || video.canPlayType("video/mp4") == 'probably') {
type = '.mp4';
}
video.src = videoResolution + type;
video.addEventListener('loadedmetadata', function() {
video.currentTime = pos;
video.play();}, false);
}
video.load();
function updateResolution(){
if (window.devicePixelRatio){
pixelRatio = window.devicePixelRatio;
}
availScreenWidth = document.documentElement.clientWidth * pixelRatio;
availScreenHeight = document.documentElement.clientHeight * pixelRatio;
}
</script>
</body>
</html>
答案 0 :(得分:0)
对video.load()
的调用超出了updateVideo()
- 由于标签有点不均匀,因此很难看到。因此,当您的更新事件发生时,视频源可能实际上不会更新。尝试将该调用放在该事件处理函数中。
然而,一旦你开始工作,你可能会发现自己遇到了很多中断和更多的更新。我尝试了类似的情况,发现它有助于限制调整大小更新。函数完成后,保存时间戳。下次收到resize事件时,如果它小于100ms-300ms左右,请提前设置超时返回。 (确保同时清除任何未完成的超时。)这样,当用户拖动窗口大小时,您不必更新这么多次。