Question

当鼠标悬停在我们的视频上时，我正试图让我的视频在不同的部分播放，但我似乎无法使其正常工作。我已经添加了脚本，并在不同的浏览器上测试了该页面。

<html>
<head>
<meta charset="utf-8">
<title id="titulo">Documento sin título</title>
<link href="Estilos/estilo_tareavids.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<script>
        document.getElementById('video1').currentTime=5;



    </script>
</head>

<body>
<header><center>VIDEOS</center></header>        
<div id="caja1"><center><video id="video1" src="Videos/Keep Away _ Star Wars Blips.mp4" onMouseOver="document.getElementById('video1').play();" onMouseOut="document.getElementById('video1').pause();"   > </video></center> </div>

</body>
</html>

Answer 1

将#t = [（start_time），（end_time）]添加到媒体网址的末尾。

<div id="caja1"><center><video id="video1" src="Videos/Keep Away _ Star Wars Blips.mp4" onMouseOver="document.getElementById('video1').play();" onMouseOut="document.getElementById('video1').pause();"   > </video></center> </div>

到

<div id="caja1"><center><video id="video1" src="Videos/Keep Away _ Star Wars Blips.mp4#t=5,7" onMouseOver="document.getElementById('video1').play();" onMouseOut="document.getElementById('video1').pause();"   > </video></center> </div>

Answer 2

您将此行放在<head>：

中

document.getElementById('video1').currentTime = 5;

在读取和呈现其余HTML之前执行，因此无法找到您的<video>标记并失败。

您可以将其移至<video>标记下方，如下所示：

<header>
  <center>VIDEOS</center>
</header>
<div id="caja1">
  <center><video id="video1" src="Videos/Keep Away _ Star Wars Blips.mp4" onMouseOver="document.getElementById('video1').play();" onMouseOut="document.getElementById('video1').pause();"> </video></center>
</div>
<script>
  document.getElementById('video1').currentTime = 5;
</script>

或者，您可以在使用onload事件呈现HTML文档后执行此操作：

<html>
<head>
  <meta charset="utf-8">
  <title id="titulo">Documento sin título</title>
  <link href="Estilos/estilo_tareavids.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
  <script>
    document.onload = function() {
      document.getElementById('video1').currentTime = 5;
    };
  </script>
</head>
<body>
  <header>
    <center>VIDEOS</center>
  </header>
  <div id="caja1">
    <center><video id="video1" src="Videos/Keep Away _ Star Wars Blips.mp4" onMouseOver="document.getElementById('video1').play();" onMouseOut="document.getElementById('video1').pause();"> </video></center>
  </div>
</body>
</html>

在播放时，在特定位置播放HTML5视频？

2 个答案: