Lo tenía funcionando antes, pero después de unos años parece que ha dejado de funcionar.
Usando videojs v7.3.0 , y el código base del complemento se encuentra en el directorio del proyecto local.
<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> Tuve que agregar una fuente de video predeterminada o, de lo contrario, arrojaba 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(); }); }Esto solía funcionar, pero parece que no admite la actualización de la fuente de esta manera. Dado que el código base de la biblioteca no se extrae de algún CDN, creo que debería haber funcionado de la forma en que funcionaba antes.
¿Alguna idea de dónde salió mal?
En lugar de lighbox.load(); debe cargar el elemento <video> real (no en el nivel de la etiqueta <source> ).
Ejemplo de código no probado:
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(); }); }