CODEWITHSUNDEEP
javascriptjqueryhtmlvideovideo.js
Paul Mrozowski
Paul Mrozowski

Reputation: 6734

How do I load the video URL dynamically when using VideoJS?

I have a web page that needs to load a video after doing a callback to the server to retrieve the URL. For testing, I'm just loading the video into the page, but when that works I'll selectively show/hide the container.

If I directly embed the URL into the src tag and have data-setup="{}" it works OK.

However, when I try to load it dynamically it fails to load the video (no error).

Here's the HTML:

<div id="video-container">
<video id="videoplayer" class="video-js vjs-default-skin" controls preload="auto">
    <source id="videosource" type='video/mp4'>
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>

And here's the code I'm running:

$.get(url,
      function (data) {
          videojs("videosource", {}, function () {
                this.reset();
                this.src(data);
                this.load();
                this.play();
            });
        });

If I don't include the .reset() call, it errors with "this.el_.load is not a function. If I call .reset() it doesn't throw any errors, but nothing loads. I'm running Chrome, but it fails to load in Firefox as well.

I have also tried the alternative parameters when setting the src with the same results (no error, but no video either):

this.src({ type: "video/mp4", src: data });

I'm using version 5.8 via CDN.

Any ideas on where I'm going wrong?

Upvotes: 0

Views: 4470

Answers (1)

BeardFist
BeardFist

Reputation: 8201

Moving my comment to an answer, when I have used videojs I only used a video element and used the id of that. Hence removing the unneeded source element and changing it to videojs("videoplayer", to target the correct element.

Upvotes: 2

Related Questions