CODEWITHSUNDEEP
javascriptjqueryhtml5-videovideo.js
Azima
Azima

Reputation: 4151

videojs dynamic source update not working

I had this running before but after few years it seems it has stopped working.

Using videojs v7.3.0, and the plugin codebase is located in the local project directory itself.

<link rel="stylesheet" type="text/css" href="<?php echo Utility::getAssetsPath('videojs/video-js.min.css'); ?>" >
<script src="<?php echo Utility::getAssetsPath('videojs/video.min.js'); ?>"></script>

<div id="light">
  <a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
    <video id="video_player_frame" class="video-js vjs-default-skin" controls preload="none" width="595" data-setup="{}">
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
      <!--Browser does not support <video> tag -->
      <p class="vjs-no-js">Javascript is disabled.</p>
    </video>
</div>

<a href="javascript:void(0);" onclick="lightbox_open(this);" data-link="<?php echo $list['file_path']; ?>">
</a>

I had to add a default video source or else it threw No Compatible source was found for this media.

function lightbox_open(el) {
      /* load link to video source attribute */
      var link_string = el.getAttribute('data-link');
      var video_player_el_src = document.getElementById('video_player_frame').getElementsByTagName('source')[0];
      video_player_el_src.setAttribute('src', link_string);

      videojs('video_player_frame').ready(function() {
        lightBoxVideo = this;

        /** check if the video is already viewed 
        *   if not, push link to viewed_video_arr,
        *   and load the player
        **/

        if(!viewed_video_arr.includes(link_string)) {
          viewed_video_arr.push(link_string); /* store the video link to the array */
          lightBoxVideo.load(); /* reload the video player */
        } 
        
        window.scrollTo(0, 0);
        document.getElementById('light').style.display = 'block';
        document.getElementById('fade').style.display = 'block';
        lightBoxVideo.play();
      });
    }

This used to work but it seems it doesn't support updating the source this way. Since the codebase for the library is not pulled from some CDN I think it should have worked the way it was working earlier.

Any idea where it went wrong?

Upvotes: 0

Views: 589

Answers (1)

VC.One
VC.One

Reputation: 15936

Instead of lighbox.load(); you should load the actual <video> element (not at the <source> tag level).

Untested code example:

function lightbox_open(el) 
{
  //# load link to video source attribute
  var link_string = el.getAttribute('data-link');
  //var video_player_el_src = document.getElementById('video_player_frame').getElementsByTagName('source')[0];
  //video_player_el_src.setAttribute('src', link_string);
  
  let video_player_el_src = document.getElementById('video_player_frame');
  video_player_el_src.setAttribute('src', link_string);

  videojs('video_player_frame').ready( function() 
  {
    lightBoxVideo = this;

    /** check if the video is already viewed 
    *   if not, push link to viewed_video_arr,
    *   and load the player
    **/

    if(!viewed_video_arr.includes(link_string)) 
    {
        //# store the video link to the array
        viewed_video_arr.push(link_string);
        
        //# reload the video player 
        //lightBoxVideo.load();
        video_player_el_src.load();
    } 

    window.scrollTo(0, 0);
    document.getElementById('light').style.display = 'block';
    document.getElementById('fade').style.display = 'block';
    lightBoxVideo.play();
  });
}

Upvotes: 1

Related Questions