Question

我有一个页面上有多个视频（信息网站）。我使用基本的HTML / CSS播放器标记 - 没有Javascript / jQuery。我对两者都不太了解。

当页面本身刷新时，我的海报会显示每个视频，但一旦播放（或暂停）视频，海报就不会重新出现。是否有可能以某种方式将海报作为简单HTML播放器的一部分进行回忆 - 或者是尝试查找Javascript / jQuery代码并尝试使其工作的唯一选择？

尝试过 - 但仍然没有变化

<div id="video-player">
<div id="video-tree">
<video id="myVideo" poster="someImage.png" width="430" height="250" controls>
<source src="videoONE.mp4" type="video/mp4">
</video>
</div>
</div>

<div id="video-player">
<div id="video-tree">
<video id="myVideo" poster="someImage.png" width="430" height="250" controls>
<source src="videoTWO.mp4" type="video/mp4">
</video>
</div>
</div>

然后我尝试使用的功能是第一个评论中提到的功能。

<script>
var vid=document.getElementById('myVideo');
vid.addEventListener("ended", resetVideo, false);

function resetVideo() {
// resets the video element by resetting the source
this.src = this.src
}   
</script>

在提交的第一个答案中尝试了该选项，但这也没有改变。我真的了解到底发生了什么吗？当页面加载，并且有人点击视频时，变量vid正在捕获该特定元素id，然后等待获得“已结束”事件。当视频结束时，会发生该事件，然后运行“resetVideo”功能。它会重置src（videoONE或videoTWO），如果一切正常，视频的初始屏幕应重新出现。我是否正确理解这个功能实际上并没有触及海报 - 它只是重置视频。因此，如果实际的视频第一个屏幕是蓝屏 - 这是人们会看到的 - 而不是原始的海报/闪屏 - 对吗？那么我真的需要重置海报吗？

Answer 1

修改

如果您有多个视频，getElementById()将不适用于所有视频，则设计为仅访问一个元素，因为ID是唯一的。您不能拥有2个ID为myVideo的视频，您不能拥有ID为video-player的2个div，也不能拥有ID为video-tree的2个div。将div ID更改为class，将myVideo更改为myVideo1和myVideo2。
您必须为每个视频添加一个浪费和冗余的事件，或者您可以将视频收集到一个列表（数组，NodeList等）中。

Snippet 2将：

将所有4个视频元素收集到NodeList中并将其转换为数组。
使用数组方法forEach()，它将获取数组中的每个视频，并为其添加eventListener（有点浪费，但如果我提高效率，它会更复杂）。

请参阅代码段2

旧

我不记得任何在没有JavaScript的情况下调用poster属性的方法。但看起来好像你已经使用过JavaScript，所以你需要使用.load()方法。

Snippet 1

＆＃13;

var vid = document.getElementById('vid');

vid.addEventListener('ended', function(e) {
  this.load();
}, false);

＆＃13;

<video id='vid' poster="http://placehold.it/430x250/0e0/111?text=POSTER" width="430" height="250" controls>
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005612.mp4" type="video/mp4">
</video>

＆＃13;

Snippet 2

＆＃13;

<div class="video-player">
  <div class="video-tree">
    <video id="myVideo1" poster="http://placehold.it/430x250/000/fff?text=POSTER I" width="430" height="250" controls>
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" type="video/mp4">
</video>
  </div>
</div>

<div class="video-player">
  <div class="video-tree">
    <video id="myVideo2" poster="http://placehold.it/430x250/0ff/000?text=POSTER II" width="430" height="250" controls>
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005610.mp4" type="video/mp4">
</video>
  </div>
</div>

<div class="video-player">
  <div class="video-tree">
    <video id="myVideo3" poster="http://placehold.it/430x250/e00/fff?text=POSTER III" width="430" height="250" controls>
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005611.mp4" type="video/mp4">
</video>
  </div>
</div>

<div class="video-player">
  <div class="video-tree">
    <video id="myVideo4" poster="http://placehold.it/430x250/fc0/000?text=POSTER IV" width="430" height="250" controls>
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005612.mp4" type="video/mp4">
</video>
  </div>
</div>
<script>
  var videos = Array.from(document.querySelectorAll('video'));

  videos.forEach(function(vid, idx) {
    vid.addEventListener('ended', resetVideo, false);
  });

  function resetVideo(e) {
    this.load();
  }
</script>

＆＃13;

Answer 2

这是有效的 - 上述两个建议的组合。非常感谢@Offbeatmammal和@ zer00ne。

身体：

<div class="video-player">
<div class="video-tree">
<video id="myVideo1" poster="someImage.png" width="430" height="250" controls>
<source src="someVideo.mp4" type="video/mp4"> 
</video>
</div> <!-- end video-tree class -->
</div><!-- end video-player class -->

功能

<script>
var vid=document.getElementById('myVideo1');
vid.addEventListener("ended", resetVideo, false);

function resetVideo() {
// resets the video element by reload of video
this.load()
}   
</script>

我认识到这不是一个页面上多个视频的优雅解决方案，因为它需要额外的脚本来识别被调用的视频。我们最终解决了这个问题，并且正在解决这个问题。通过确保我们的媒体团队创建视频，以便他们不会以空白屏幕结束。对于我们较旧（有限数量）的视频，此解决方案正在运行。

可以在视频结束时显示HTML视频海报，而无需使用jquery或javascript

2 个答案:

修改

旧