Al ejecutar el código el plugin videoJS
reemplaza el reproductor de vídeo de HTML5
, ya la verdad muy contenta, me decía entre mi lo logre.
Pero al dar clic en el siguiente vídeo incluso volviendo al primer vídeo el plugin se pierde, dejándome el reproductor por defecto de HTML5
Lo pueden comprobar en jsfiddle o aquí:
$(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) => y.b == 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>
Pensé que el plugin videoJS
no funcionaba para varios vídeos en la misma pagina, pero realmente si funciona para varios vídeos aquí la prueba: https://jsfiddle.net/bq81phfy/
Entonces lo que se me ocurre que una posible solución es ejecutar al mismo tiempo el plugin videoJS
al cambiar al siguiente vídeo o retroceder al vídeo anterior.
Mi problema: ¿Cómo logro que se ejecute la librerías del plugin? O ¿Cómo hacer que funcione el plugin para todos los vídeos?
videojs
? Una de las cosas que veo es que no agregas esa librería en tu código.videoJS
se pierde al cambiar de vídeo, es decir al continuar con el siguiente vídeo e incluso al retroceder al vídeo anterior. Tengo una idea de como se solucionaría pero no sé como realizarlo :(