如何定位HTML 5中的自动播放属性模态内的视频元素 [英] How to target autoplay attribute in HTML 5 Video element inside modal

问题描述

我在模式窗口中有一个HTML 5视频元素。现在我需要检查一下，如果打开了模式并且视频元素已经自动播放，然后播放视频。如果视频没有自动播放属性，则不要播放视频。

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

完整的代码请看上面的Codepen。 / p>

 < video id =somevidcontrols autoplay loop> 
< source src =http://www.w3schools.com/html/mov_bbb.mp4type =video / mp4> 
< source src =http://www.w3schools.com/html/mov_bbb.oggtype =video / ogg> 
您的浏览器不支持HTML5视频。 
< / video> 
  

所以它需要定位 autoplay 和它不能使用视频中的ID字段，它应该针对 id：popup1 中的视频元素。请参阅Codepen！

<$ p （函数（e））{
$（'a [data-modal-id]'）。如果（$（'。modal-box.opened'）。find（'video'）。attr（autoplay）== true）{
console.log（'CLICK： ModalBox if Video Autoplay is true。'）;
}
}）;
}）;

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

这段代码给出了错误：Uncaught ReferenceError：自动播放未定义

预先感谢您的帮助。

解决方案

您正在使用变量 autoplay code>autoplay，尝试更新您的代码至此：

  if（$ （'.modal-box.opened'）。find（'video'）。attr（'autoplay'）== true）{
 console.log（'CLICK：ModalBox if Video Autoplay is true。'）; 
} 
  

更新： $ b

试试这个：

  if（（$（'。modal-box.opened'）） （'。video'）。get（0）.find（'video'）。attr（'autoplay'）==='autoplay'））{
 $（'。modal-box.opened'）。 。玩（）; 
} 
  

I have a HTML 5 video element inside a modal window. Now I need a check that if modal is opened and video element has autoplay then play the video. If the video does not have the attribute autoplay then do not play the video.

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

For the full code look at the Codepen above please.

<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>

So it needs to target the autoplay and it cannot use the ID field from the video it should target the video element inside id: popup1 see 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.');
            }
    });             
});

The code where the problem is above. Now I know this only gives me a log that is just for testing.

This code gives the error: Uncaught ReferenceError: autoplay is not defined

Thank you in advance for helping.

解决方案

You're using the variable autoplay rather than the string "autoplay", try updating your code to this:

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

UPDATE:

Try this instead:

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

这篇关于如何定位HTML 5中的自动播放属性模态内的视频元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！