可以在不使用 jquery 或 javascript 的情况下在视频结束时显示 HTML 视频海报吗答案

【问题标题】：Can HTML video poster be shown at close of video without using jquery or javascript可以在不使用 jquery 或 javascript 的情况下在视频结束时显示 HTML 视频海报吗
【发布时间】：2017-04-10 14:46:24
【问题描述】：

我有一个包含多个视频的页面（信息站点）。我使用基本的 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>

那么我尝试使用的功能就是第一个 cmets 中提到的那个。

<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），如果一切正常，视频的初始屏幕应该会重新出现。我是否理解这个功能实际上并没有触及海报 - 它实际上只是重置视频。因此，如果实际视频的第一个屏幕是蓝屏——这就是人们会看到的——而不是原始海报/启动画面——对吗？那是我真正需要重置的海报吗？

【问题讨论】：

没有Javascript？不。使用 Javascript，非常简单，例如：stackoverflow.com/questions/27284751/…
我对 JavaScript 了解的不够多，无法真正理解您发布的答案，但会深入研究，看看我是否能弄清楚。我觉得我太绿了，无法使用 stackoverflow。
如果你能给我们展示一个页面样本，我可以告诉你如何整合它......
你提供的真是太慷慨了。我将首先尝试自己集成它（如果它坏了，我将不得不支持它，所以如果可以的话，我需要尝试了解它是如何工作的），如果我无法弄清楚，我将展示一个示例并获得您的指导。谢谢！
@SBradford 非常感谢您的坚持。许多新用户对实际学习的关注度远不如您。

标签： html video html5-video

【解决方案1】：

编辑

当您拥有多个视频时，getElementById() 不会对所有视频都有效，它旨在访问一个元素，因为 id 是唯一的。您不能拥有 2 个视频id 为myVideo，不能有2 个id 为video-player 的div，也不能有2 个id 为video-tree 的div。将 div id 更改为class，将myVideo 更改为myVideo1 和myVideo2。
您必须为每个视频添加一个既浪费又多余的事件，或者您可以将视频收集到一个列表中（数组、NodeList 等）。

片段 2 将：

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

见片段 2

旧

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

片段 1

var vid = document.getElementById('vid');

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

<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>

片段 2

<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>

【讨论】：

你能告诉我更多关于为什么这与我使用的函数不同的原因吗？ “this.load”完成了什么？它是否更具体到已点击的视频并因此重新加载该特定海报？那么我是否不需要像我的示例中那样使用重置视频功能？（抱歉 - 正如我在原始帖子中所说 - 我对 javascript 非常熟悉，并且正在努力真正理解。）
试过了，没有任何变化。视频结束后，视频海报不会重新出现。只出现蓝色的空白屏幕。
OK 添加到我的问题中，以更清楚地说明我想要完成的工作 - 什么有效/无效 - 以及我认为 javascript 正在做什么。
load() 是您在更改.src 时需要调用的，或者您通常需要重置它。作为副作用，视频元素的其余属性也会被重置。在resetVideo() 函数中，将this.src = this.src 替换为this.load()。如果您希望每页有多个视频，那么您必须提出另一个问题，因为您现在拥有的内容仅适用于一个。解释超出了这个线程。
您是否通过单击标有“运行代码 sn-p”的蓝色按钮来测试代码段？

【解决方案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>

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

【讨论】：