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：未定义自动播放

提前感谢您的帮助。

Answer 1

我想你忘记了自动播放的引号，比如

if ($('.modal-box.opened').find('video').attr("autoplay") == true)

此外，它应该使用prop（“autoplay”），知道autoplay是一个属性

编辑：自动启动

$(this).get(0)未返回所需的元素，因此您必须再次恢复视频：

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

Answer 2

您使用的是变量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();
}

Answer 3

检查是否设置了自动播放：

var $video = $('.modal-box.opened').find('video');

if( typeof $video.attr('autoplay') === "string"){
    $video.get(0).play();
}

或检查是否未设置自动播放：

if( typeof $video.attr('autoplay')  === "undefined"){
    //Logic here
}

Answer 4

请检查此示例我希望这会有所帮助

[1]: https://jsfiddle.net/NbE9d/570/

如何在模态中的HTML 5视频元素中定位自动播放属性

4 个答案: