jquery – How to run plugin / library when changing video?

Question:

When executing the code, the videoJS plugin replaces the HTML5 video player, and to be honest, I was very happy, I was telling myself I did it.

But when clicking on the next video even going back to the first video the plugin is lost, leaving me the default HTML5

You can check it in jsfiddle or here:

 $(document).ready(function() { function insertar_contenido(vid, elemento) { var contenido, fuente var url = elemento.attr("href") var ext = "mp4" var formato = ext var es_video = new RegExp("^.+\\." + ext + "$").test(url) var cargando = $('.loading') function mostrar() { cargando.fadeIn(200) } function ocultar() { cargando.fadeOut(100) } mostrar() var cuadro = vid.find(".cuadro") if (cuadro.length != 0) { $("#ocultado").append(cuadro) } if (es_video) { var json = {"aspectRatio":"640:267", "playbackRates": [1, 1.5, 2]}; contenido = $(document.createElement("video")) fuente = $(document.createElement("source")) fuente.attr("src", url) fuente.attr("type", "video/" + formato) contenido.attr("controls", true) contenido.attr("autoplay", true) contenido.attr("class","video-js") contenido.attr('data-setup', JSON.stringify(json)); contenido.on('waiting', mostrar) contenido.on('canplay', ocultar) contenido.append(fuente) } else { var id = elemento.attr("id") if (id == undefined) { contenido = $(document.createElement("iframe")) contenido.attr("src", url) contenido.on('load', ocultar) } else { contenido = $(document.createElement("div")) contenido.append($("#c_" + id)) ocultar() } } vid.html("") vid.append(contenido) $("#enlaces a").removeClass("playing") elemento.addClass("playing") } var indice = 0 var vid = $('#myvid') var primer_elemento = $("#enlaces a:first") var enlaces = $("#enlaces a").map((x, y) => { return { a: x, b: y } }) insertar_contenido(vid, primer_elemento) primer_elemento.addClass("playing") $("#enlaces a.link").on("click", function(event) { event.preventDefault() var esto = $(this) indice = enlaces.filter((x, y) => yb == this)[0].a insertar_contenido(vid, esto) }) $("#atras").on("click", function(event) { event.preventDefault() var esto = $(this) --indice if (indice < 0) { indice += enlaces.length } enlaces[indice].b.click() }) $("#siguiente").on("click", function(event) { event.preventDefault() var esto = $(this) ++indice if (indice >= enlaces.length) { indice -= enlaces.length } enlaces[indice].b.click() }) })
 #myvid { color: #ffff; } .container * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .container *::after, .container *::before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } h2.title { font-size: 24px; color: #fff; font-weight: bold; text-align: center; padding: 2em; display: block; margin: auto; background-color: #A97A7A; } .container { width: 960px; background: #010101; margin: auto; position: relative; height: 550px; } .vidcontainer { width: 75%; height: 100%; float: right; position: relative; overflow: hidden; } video { width: 100%; height: 100%; color: #fff; text-align: center; font-size: 20px; } .videolist { float: right; width: 25%; background-color: rgb(76, 76, 76); height: 100%; position: relative; } .vids { margin: 5px; background-color: #292626; max-height: 450px; border: 1px solid #616060; overflow-y: scroll; list-style: none; direction: rtl; } .vids::-webkit-scrollbar { width: 5px; background-color: #8A8A8A; border: 1px solid #AFACAC; } .vids::-webkit-scrollbar-thumb { background-color: #FF8D00; border-radius: 5px; } .vids::-webkit-scrollbar-thumb:hover { background-color: #fff; } .vids::-webkit-scrollbar-thumb:active { background-color: #ccc; } .vids a { text-decoration: none; color: #fff; font-size: 16px; display: block; border-bottom: 1px solid #616060; padding: 8px 5px; margin: 5px; } /* --- controllers --- */ .controllers { position: absolute; bottom: 0; height: 50px; background-color: #fff; width: 100%; } .controllers button { border: 1px solid #E7E7E7; background-color: #FFFFFF; color: #777; height: 40px; width: 40px; border-radius: 50%; margin: 5px; box-shadow: 1px 1px 3px #4C4C4C; outline: none; font-size: 18px; display: inline-block; float: left; } .controllers button:focus { box-shadow: 1px 0px 7px #4C4C4C; border-color: #ff8d00; color: #ff8d00; background-color: #4C4C4C; } .btnPlay::after { content: "\f04b"; font-family: 'FontAwesome'; } .paused::after { content: "\f04c"; } .sound::after { content: "\f027"; font-family: 'FontAwesome'; } .sound2:after { content: "\f028"; } .muted::after { content: "\f026"; } .btnFS::after { content: "\f065"; font-family: 'FontAwesome'; } .ads { height: 350px; width: 350px; position: absolute; background-color: #777; top: 27.5px; right: 40px; z-index: 11; } .bigplay { height: 150px; width: 150px; position: absolute; top: 127.5px; left: 85px; z-index: 11; color: #fff; font-size: 150px; line-height: 150px; text-align: center; cursor: pointer; text-shadow: 0px 0px 15px #ff8d00; } .closeme { height: 32px; width: 32px; background-color: #fff; top: -10px; right: -10px; border: 1px solid #ff8d00; display: block; position: absolute; border-radius: 50%; text-align: center; line-height: 30px!important; color: #ff8d00; font-size: 25px!important; } .playing { background-color: #999; border: 1px solid #ff8d00!important; -webkit-transition: 0s; -o-transition: 0s; transition: 0s; } .playing:after { content: "\f01d"; font-family: 'FontAwesome'; color: #ff8d00; float: left; } /* PROGRESS BAR CSS */ .topControl { position: absolute; display: block; width: 100%; bottom: 50px; background-color: #fff; z-index: 1; } /* Progress bar */ .progress { width: 100%; height: 5px; position: relative; float: left; cursor: pointer; background: #999; } .progress span { height: 100%; position: absolute; top: 0; left: 0; display: block; } .timeBar { z-index: 10; width: 0; background: #ff8d00; } .bufferBar { z-index: 5; width: 0; background: #eee; } /* time and duration */ .time { width: 12%; float: right; text-align: center; font-size: 11px; line-height: 12px; right: -12%; opacity: 0; position: absolute; } .topControl:hover .time { right: 0; opacity: 1; } .topControl:hover .progress { width: 88%; height: 12px; } /* VOLUME BAR CSS volume bar */ .volume { position: relative; cursor: pointer; width: 70px; height: 10px; float: left; margin-top: 20px; margin-right: 15px; background-color: #999; } .volumeBar { display: block; height: 100%; position: absolute; top: 0; left: 0; background-color: #ff8d00; z-index: 10; } .loading { width: 100%; background-color: rgba(255, 141, 0, 0.5); height: 100%; position: absolute; top: 0; } i.fa.fa-spinner.fa-spin { height: 60px; width: 60px; font-size: 60px; color: #fff; text-shadow: 0px 0px 8px #000; top: 172.5px; left: 330px; position: absolute; } .disabled { pointer-events: none; cursor: not-allowed; background-color: #C2C2C2!important; } ul.speedcnt { display: none; position: absolute; right: 30px; bottom: 60px; background-color: #fff; border-radius: 5px; list-style: none; -webkit-transition: 0s; -o-transition: 0s; transition: 0s; } ul.speedcnt li { text-align: center; font-family: 'verdana', tahoma, serif; font-size: 13px; padding: 5px 20px; cursor: pointer; display: block; border-bottom: 1px solid #ccc; } ul.speedcnt li:last-child { border-bottom: none; } ul.speedcnt li.selected { background-color: rgba(255, 141, 0, 0.6); }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <!--<link rel="stylesheet" type="text/css" href="https://vjs.zencdn.net/5-unsafe/video-js.css">--> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!--<script type="text/javascript" src="https://vjs.zencdn.net/5-unsafe/video.js"></script>--> <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet"> <!-- If you'd like to support IE8 (for Video.js versions prior to v7) --> <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> <div class="container"> <div class="vidcontainer"> <div id="myvid"></div> <div class="loading"> <i class="fa fa-spinner fa-spin"></i> </div> </div> <div class="videolist"> <nav class="vids"> <a id="atras" href="#">Atras</a> <a id="siguiente" href="#">Siguiente</a> </nav> <nav id="enlaces" class="vids"> <a class="link" href="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4">test1</a> <a clases="link" href="https://www.wikipedia.org">test web</a> <a class="link" href="http://www.html5videoplayer.net/videos/toystory.mp4">test2</a> <a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/H264/Other_Media/H264_test8_voiceclip_mp4_480x320.mp4">test3</a> <a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/MP4/ConvertedFiles/Media-Convert/Unsupported/dw11222.mp4">test4</a> <a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/MP4/ConvertedFiles/Media-Convert/Unsupported/test7.mp4">test5</a> </nav> <div id="ocultado" style="display: none"> <div class="cuadro" id="c_link_10">Content</div> </div> </div> </div> <script src='https://vjs.zencdn.net/7.4.1/video.js'></script>

I thought that the videoJS plugin videoJS not work for several videos on the same page, but it really works for several videos here the test: https://jsfiddle.net/bq81phfy/

So what I can think of as a possible solution is to run the videoJS plugin at the same time when switching to the next video or going back to the previous video.

My problem: How do I get the plugin libraries to run? Or How to make the plugin work for all videos?

Answer:

I explain the problem to you

Short explanation:

The VideoJS library does not know that you have added a new element and does not apply the change to it

Long explanation:

The VideoJS library changes the player automatically when it finds the video-js class, that does it in the document ready event, you also add an event to the document ready event (with $(document).ready() ), which it will inject the first video-js , and this one is executed before the VideoJS one, so when the VideoJS library looks for the elements that have the video-js class, it finds your video and gives it the format you want, and up to that point everything works fine. . The detail comes in the next point, when you click on the link, you add another video-js element but nobody tells the library to load it (it only runs at the beginning) that is why even if you return to the previous link it does not it works, because you replaced the element that the library knew with a new one that the library does not know.

Solution:

Simple, tell the library that there is a new video-js element.

 videojs(contenido[0]);

You can see it in action: https://jsfiddle.net/3kg5yrtx/2/

Scroll to Top