SEO友好的HTML5视频(视频.js）介绍与覆盖淡出

SEO friendly HTML5 video (video.js) intro with overlay fadeout

本文关键字：视频 淡出 覆盖 HTML5 SEO js      更新时间：2023-09-26

我正在使用视频.js插件，并有一个视频介绍，可以在我的网站加载时播放。它的工作原理是在页面加载后立即自动播放，并且它位于div 容器中，该容器被 z 索引并覆盖在我的主页上。

我将 jquery 设置为 delay()，然后fadeOut()div 显示我的主页。

理论上很好，只有每个人都有不同的连接速度，fadeOut()经常发生得太早或太晚。

有没有办法在视频停止时fadeOut()我的div？

这是我的jQuery：

$(document).ready(function() {
        $("#overlay-video").delay(10000).fadeOut('slow');
   });

编辑：我也刚刚尝试了以下内容，但这也不起作用：

$(document).ready(function(){
  $("#movie-id").bind('ended', function(){
    alert("planet earth");
  });
});

感谢您的回复，我的 HTML 如下所示：

<div id="overlay-video">
    <!-- Begin Video.js -->
    <video id="movie-id" class="video-js vjs-default-skin alignleft" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload="auto" autoplay data-setup="{}">
        <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
        <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
        <source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"' />
    </video>
    <!-- End Video.js -->
</div>

我的jQuery正在工作，因为我可以很好地淡出视频元素。

几件事：

  1. 主页上的所有脚本只需要一个doc.ready fxn
    2. 使用
  2. on() 方法（使用 jQuery 1.7+）
  3. 最重要的是，fadeOut()需要在on('ended')功能内部

作为一般的HTML5 <video>解决方案，这应该有效：http://jsfiddle.net/trpeters1/XzCMb/1/

$(document).ready(function(){
    $("#movie-id").on('ended', function() {             
        console.log('im done');
        $("#overlay-video").delay(10000).fadeOut('slow');
    });
});

但是，Video-js 似乎需要调用 video.js 对象，因此请改为这样做：http://help.videojs.com/discussions/questions/509-videojs-and-passing-an-event-at-the-end-of-the-video

_V_("#movie-id").ready(function(){ //note the different selector for the ready() fxn
   this.addEvent("ended", function(){ //adding "ended" event to video-js object
     {   console.log('im done');
        $("#overlay-video").delay(10000).fadeOut('slow');
      } 
   });
 });
相关文章：