可以在不使用jquery或javascript的情况下在视频结束时显示HTML视频海报 [英] Can HTML video poster be shown at close of video without using jquery or javascript

问题描述

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

I have a page on which there are multiple videos (informational site). I use the basic HTML/CSS player markup - no Javascript/jQuery. I just don't know enough about either.

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

My posters show up for each video when the page itself is refreshed, but once a video is played (or paused) the poster does not reappear. Is it possible to recall the poster somehow as part of the simple HTML player - or is the only choice to try to find Javascript/jQuery code and try to make it work?

试过这个 - 但仍然没有变化

TRIED THIS - but still no change

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

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

Then the function I am trying to use is the one mentioned in first comments.

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

Tried the option in the first answer submitted but that made no change either. Am I understanding actually what has to happen? When the page loads, and someone clicks on the video, the variable vid is capturing that specific element id and then waiting to get an "ended" event. When the video ends, that event occurs, then the "resetVideo" function runs. It resets the src (videoONE or videoTWO) and if all is working properly, the initial screen of the video should reappear. Am I right in understanding that this function doesn't actually touch the poster - it is really just resetting the video. So if the actual video first screen is a blue screen - that's what people would see - and not the original poster/splash screen - right? So is it the poster I actually need to reset?

推荐答案

编辑

Edit

1. 如果您有多个视频， getElementById（）将不适用于所有视频，它的设计目的是访问只有一个因素，因为ID是唯一的。您不能拥有2个ID为 myVideo 的视频，您不能拥有ID为<$ c的2个div $ c>视频播放器，也不能有2个id为 video-tree 的div。将div ID更改为 class ，将 myVideo 更改为 myVideo1 和 myVideo2 。

1. When you have more than one video, getElementById() will not work for all of them, it's designed to access only one element because an id is unique. You cannot have 2 videos with the id of myVideo, you cannot have 2 divs with the id of video-player, nor can you have 2 divs with the id of video-tree. Change the div ids into class and the myVideo into myVideo1 and myVideo2.

您必须向每个视频添加一个浪费和冗余的事件，或者您可以将视频收集到列表中（数组，NodeList等）。

You must either add an event to each video which is wasteful and redundant, or you can collect the videos into a list (an array, NodeList, etc).

Snippet 2将：

Snippet 2 will:

1. 将所有4个视频元素收集到NodeList中并将其转换为数组。


2. 使用数组方法 forEach（） it将获取数组中的每个视频并添加一个 eventListener （有点浪费但如果我提高效率会更复杂）。

1. Collect all 4 video elements into a NodeList and convert it into an array.
2. Using the array method forEach() it will take each video in the array and add an eventListener to it (a little wasteful but if I make more efficient it'll be more complicated).

查看小节2

---

See Snippet 2

---

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

I don't recall any way to invoke the poster attribute without JavaScript. But it looks as if you already use JavaScript anyhow so you need to use the .load() method.

代码段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>

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

这篇关于可以在不使用jquery或javascript的情况下在视频结束时显示HTML视频海报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！