首页 文章

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

提问于
浏览 次
1

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

html5 video html5-video

2 回答

  • 1

    编辑

    • 如果您有多个视频， getElementById() 将不适用于所有视频，它设计为访问 only one element because an id is unique. 您不能拥有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()方法 .

    Snippet 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>
    回复于
  • 0

    这是有效的 - 结合了上述两个建议 . 非常感谢@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>

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

    回复于

相关问题