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