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

后端 未结 4 651
一生所求
一生所求 2021-01-23 23:35

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 th

相关标签:
4条回答
  • 2021-01-23 23:52

    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();
    }
    
    0 讨论(0)
  • 2021-01-24 00:02

    Please Check this Example I hope It would be helpful

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

    0 讨论(0)
  • 2021-01-24 00:13

    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();
    }
    
    0 讨论(0)
  • 2021-01-24 00:13

    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
    }
    
    0 讨论(0)
提交回复
热议问题