视频设置为在某个时间点开始 - 当前帧未显示

时间:2017-01-01 11:15:51

标签: javascript ios html5-video

我希望在多个实例的网页上添加视频,每个视频都从不同的时间点开始。我能够实现这一点,以便它可以在(最近的)桌面浏览器和IOS上运行,但仍有一个问题:在IOS版本中,当加载页面时,视频不会显示当前帧。在桌面浏览器中,视频会显示正确的当前帧。

我想使用框架本身,并尽可能避免使用“海报”属性。

以下是我的代码 - 任何帮助都将不胜感激。

由于

mrwassen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>

<video id="vid1" width="500" controls="" >
       <source src="media/ak_video.mp4"> 
       Your browser does not support the video tag.
</video>

<video id="vid2" width="500" controls="" >
       <source src="media/ak_video.mp4"> 
       Your browser does not support the video tag.
</video>

<script>
var vid1 = document.getElementById("vid1");
var vid2 = document.getElementById("vid2");

if (iOS() == 1) {
  vid1.addEventListener("canplay",function() { this.currentTime = 22;});
  vid2.addEventListener("canplay",function() { this.currentTime = 50;});
  } 
else 
{  
vid1.addEventListener('loadedmetadata', function() {this.currentTime = 22; }, false);
vid2.addEventListener('loadedmetadata', function() {this.currentTime = 50; }, false);
}

function iOS() {
  var iDevices = [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ];
  if (!!navigator.platform) {
    while (iDevices.length) {
      if (navigator.platform === iDevices.pop()){ return 1; }
    }
  }
  return 0;
}
</script> 

  </body>
</html>

0 个答案:

没有答案