javascript - 如何在模态内的 HTML 5 Video 元素中定位自动播放属性

Question

我在模态窗口中有一个 HTML 5 视频元素。现在我需要检查是否打开了模态并且视频元素具有自动播放功能然后播放视频。如果视频没有自动播放属性则不播放视频。

http://codepen.io/hennysmafter/pen/YqmLKR

有关完整代码，请查看上面的 Codepen。

<video id="somevid" controls autoplay loop>
 <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
 <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
 Your browser does not support HTML5 video.
</video>

因此它需要以 autoplay 为目标并且它不能使用视频中的 ID 字段它应该以 id: popup1 中的视频元素为目标参见 Codepen!

$(document).ready(function(){
    $('a[data-modal-id]').click(function(e) {
        e.preventDefault();     
            if ($('.modal-box.opened').find('video').attr(autoplay) == true) {
                console.log('CLICK: ModalBox if Video Autoplay is true.');
            }
    });             
});

问题出在上面的代码。现在我知道这只会给我一个仅用于测试的日志。

此代码给出错误:Uncaught ReferenceError: autoplay is not defined

预先感谢您的帮助。

Answer 1

您正在使用变量 autoplay 而不是字符串 "autoplay"，请尝试将您的代码更新为:

if ($('.modal-box.opened').find('video').attr('autoplay') == true) {
  console.log('CLICK: ModalBox if Video Autoplay is true.');
}

更新:

试试这个:

if (($('.modal-box.opened').find('video').attr('autoplay') === 'autoplay')) {
  $('.modal-box.opened').find('video').get(0).play();
}