0

Under jQuery 2.2.4, the below code was working. But after switching over to Bootstrap 4 and jQuery 3.5.1, it stopped working and I saw the error:

Uncaught TypeError: Cannot read property 'indexOf' of undefined

I was able to determine that the error was happening at the moment of attempting to use the load() method on the <video> container - but the container exists (el.length() == 1) and literally nothing else changed other than jQuery/Bootstrap.

HTML:

    <div class="vlink"><div class="vid" id="bl">[ Video 1 ]</div></div>
    <div class="vlink"><div class="vid" id="bg">[ Video 2 ]</div></div>

    <div id="lb" class="absoluteDiv flex-parent">
        <div id="inner" class="flex-parent">
            <div id="closex"> &times; </div>
            <div id="lbBody">
                <div id="videoDiv">
                    <video id="video" width="700" controls><source id="vidsource" src="" type="video/mp4"></video>
                </div>
                <div id="explan"></div>
            </div>
        </div>
    </div>

javascript/jQuery:

    let id = this.id;
    $('#vidsource').attr('src', './vid/'+id+'.mp4');
    $('#video').load().attr('autoplay', true);
cssyphus
  • 37,875
  • 18
  • 96
  • 111

1 Answers1

0

Solution:

Under Bootstrap4 / jQuery 3.5.1, it is necessary to set the src attribute on the <video> container itself (just totally ignore the <source> element.

Also, use attributes on the <video> container to force play:

let id = this.id;
$('#video').attr('src', './vid/'+id+'.mp4').attr('autoplay', true);

There is one report that this has something to do with the files being referenced in nested tags, specifically in webkit browsers.

Source:

https://stackoverflow.com/a/7993347

cssyphus
  • 37,875
  • 18
  • 96
  • 111