jquery - 使用 jQuery 启动 HTML5 视频

Question

我想在里面播放一个视频，在#video-overlay旁边，代码是：

jQuery(".landing-container #video-overlay").hover(function(){
        this.prev().play();
    },function(){
        this.prev().pause();
    });

如果我更改功能并使用"video"而不是，#video-overlay我会删除prev()一切正常..

什么是完美的解决方案？我想在#video-overlay悬停时开始播放视频。

Answer 1

DOMElement对象不支持.prev()方法，对于使用 jQuery.prev()方法，元素应该用 jQuery 包裹：

$("#video-overlay").hover(function() {
   $(this).prev().get(0).play();
              // ^-- Get the first selected DOM Element object from jQuery Collection
              //     for calling `.play` method, assuming the returned element is
              //     a Video or Audio Element object
  }, function() {
     $(this).prev().get(0).pause();
});

使用 DOM Element 对象的previousElementSibling属性（不适用于 IE8 及以下版本）：

$("#video-overlay").hover(function() {
     this.previousElementSibling.play();
  }, function(){
     this.previousElementSibling.pause();
});