HTML5视频的currentTime属性问题答案

【问题标题】：Problems with the currentTime attribute of HTML5 videoHTML5视频的currentTime属性问题
【发布时间】：2013-01-30 19:23:57
【问题描述】：

我遇到了 HTML5 视频的 currentTime 属性的问题。我的小程序根据设备分辨率提供不同的视频（不同的分辨率）。我想在每个 window.onload、window.resize 和 window.orientationchange-Event 之后检查设备分辨率。在这些事件之后，可能会提供新视频（使用不同的更合适的分辨率）。我不想再次在第 0 秒开始播放视频，因此我尝试在事件发生之前捕获视频的 currentTime。我的解决方案在 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>

【问题讨论】：

标签： html5-video

【解决方案1】：

对video.load() 的调用不在updateVideo() 范围内 - 因为选项卡有点不均匀，所以很难看出这一点。因此，当您的更新事件发生时，视频源可能实际上并未更新。尝试将该调用放在该事件处理函数中。

但是，一旦您开始使用它，您可能会发现自己遇到了很多中断和比您想要的更多更新。我尝试了类似的情况，发现它有助于限制调整大小的更新。函数完成后，保存时间戳。下次收到resize事件时，如果小于100ms-300ms左右，提前设置超时返回。（确保也清除所有未完成的超时。）这样您就不必在用户拖动窗口大小时更新这么多次。

【讨论】：

嘿...谢谢你的建议。我实际上注意到在用户拖动窗口大小时多次触发的调整大小事件。我通过使用 setTimeout() 解决了这个问题。我只是没有在此处发布此代码以使代码更清晰。 video.load() 是复制粘贴错误（我感到羞耻）。实际上我完全删除了这个电话。如果我将此调用放入事件处理函数中，它似乎会导致无限循环：加载...等待加载元数据....加载...等待加载元数据....