How to target autoplay attribute in HTML 5 Video element inside modal

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.

Answers:

Answer

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();
}
Answer

I think you forgot the quotes around autoplay, like

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

Moreover, it should perhaps be used prop("autoplay"), knowing that autoplay is a property

EDIT : Autostart

$(this).get(0) doesn't return the desired element, so you must recover the video again :

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

To check if autoplay is set:

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

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

or to check if autoplay is not set:

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

Please Check this Example I hope It would be helpful

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.