Home / Questions / 251567
Accepted
Lou
Asked: 2020-04-05 05:13:58 +0800 CST 2020-04-05 05:13:58 +0800 CST

How to run plugin/library when changing video?

  • 772

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

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

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) => 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>

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

So what occurs to me is that a possible solution is to run the plugin videoJS at the same time when switching to the next video or going back to the previous video.

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?

jquery

2 Answers

  1. Best Answer

    Te explico el problema

    Explicación corta:

    La librería VideoJS no sabe que has agregado un nuevo elemento y no le aplica el cambio

    Explicación larga:

    La librería de VideoJS cambia el reproductor automáticamente cuando encuentra la clase video-js, eso lo hace en el evento document ready, tu también agregas un evento al de document ready(con $(document).ready()), que va a inyectar el primer video-js, y este se ejecuta antes que el de VideoJS por lo que cuando la librería VideoJS busca los elementos que tengan la clase video-js, esta encuentra tu video y le da formato que quieres, y hasta ahí funciona todo bien. El detalle viene en el siguiente punto, al darle clic en el enlace, tu agregas otro elemento video-js pero nadie le dice a la librería que lo cargue (ella solo se ejecuta al principio) es por eso que aunque vuelvas al enlace anterior no funciona, por que remplazaste el elemento que la librería conocía por uno nuevo que la librería no conoce.

    Solución:

    Sencilla, decirle a la librería que hay un nuevo elemento video-js. 

     videojs(contenido[0]);

    Puedes verlo en acción: https://jsfiddle.net/3kg5yrtx/2/

    • 6

  2. Yo habia hecho algo parecido pero la lista de video estaba dentro del script y no dentro de html.

    Lo que me quedo pendiente es agregar en los botones el titulo del proximo video y del anterior, pero como al cliente no le interesaba, quedo asi, con los video de la empresa, ya que se reproducen automaticamente.

    Espero sirva.

    var videoList = [
  {
    sources: [
      {
        src: "https://www.youtube.com/watch?v=6RVSgcA8ocM",
        type: "video/youtube"
      }
    ],
    poster: "https://i.ytimg.com/vi/6RVSgcA8ocM/hqdefault.jpg",
    title : "O'Sullivan v Wilson Final F10 2018 Champion of Champions"
  },
  {
    sources: [
      {
        src: "http://media.w3.org/2010/05/sintel/trailer.mp4",
        type: "video/mp4"
      }
    ],
    poster: "https://www.rt.com/static/img/og-logo-rt.png"
  },
  {
    sources: [
      {
        src: "http://media.w3.org/2010/05/bunny/trailer.mp4",
        type: "video/mp4"
      }
    ],
    poster: "http://media.w3.org/2010/05/bunny/poster.png"
  },
  {
    sources: [
      {
        src: "https://vjs.zencdn.net/v/oceans.mp4",
        type: "video/mp4"
      }
    ],
    poster: "https://vjs.zencdn.net/v/oceans.png"
  },
  {
    sources: [
      {
        src: "http://media.w3.org/2010/05/bunny/movie.mp4",
        type: "video/mp4"
      }
    ],
    poster: "http://media.w3.org/2010/05/bunny/poster.png"
  },
  {
    sources: [
      {
        src: "//cdn.trancearoundtheworld.co.uk/files/tatw-301.6.mp3",
        type: "audio/mp3"
      }
    ],
    poster: "http://www.john00fleming.co.uk/mixes/podcasts/Nov08/GTG-Logo-Grunge_144.jpg"
  },
  {
    sources: [
      {
        src: "http://podcast.armadamusic.com/asot/episodes/episode490.m4a",
        type: "audio/mpeg"
      }
    ],
    poster: "http://podcast.armadamusic.com/asot/episodes/episode490.jpg"
  }
];

var player = videojs(document.querySelector("video"), {
  //inactivityTimeout: 0 // HIDE OR NOTE CONTROL BAR
});
try {
  player.volume(1);
} catch (e) {}

player.playlist(videoList);

document.querySelector(".previous").addEventListener("click", function() {
  player.playlist.previous();
});
document.querySelector(".next").addEventListener("click", function() {
  player.playlist.next();
});
document.querySelector(".jump").addEventListener("click", function() {
  player.playlist.currentItem(2);
  player.play();
});

player.playlist.autoadvance(0);

Array.prototype.forEach.call(
  document.querySelectorAll("[name=autoadvance]"),
  function(el) {
    el.addEventListener("click", function() {
      var value = document.querySelector("[name=autoadvance]:checked").value;
      //alert(value);
      player.playlist.autoadvance(JSON.parse(value));
    });
  }
);


var Button = videojs.getComponent("Button");


var PrevButton = videojs.extend(Button, {

  constructor: function() {
    Button.apply(this, arguments);

    this.addClass("vjs-icon-previous-item");
    this.controlText("Previous");
    
  },

  handleClick: function() {
    console.log("click");
    player.playlist.previous();
  }
});

var NextButton = videojs.extend(Button, {

  constructor: function() {
    Button.apply(this, arguments);

    this.addClass("vjs-icon-next-item");
    this.controlText("Next");
  },

  handleClick: function() {
    console.log("click");
    player.playlist.next();
  }
});

videojs.registerComponent("NextButton", NextButton);
videojs.registerComponent("PrevButton", PrevButton);

player.getChild("controlBar").addChild("PrevButton", {}, 0);
player.getChild("controlBar").addChild("NextButton", {}, 2);
    <link href="http://videojs.github.io/font/css/videojs-icons.css" rel="stylesheet" />

<link href="https://vjs.zencdn.net/5.16/video-js.min.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/5.16/video.js"></script>
<script src="https://cdn.rawgit.com/videojs/videojs-youtube/master/src/Youtube.js"></script>
<script src="https://rawgit.com/atlance01/vrapp-ionic/master/www/js/lib/videojs-playlist.js"></script>

<video class="video-js vjs-default-skin" controls width="640px" height="360px" data-setup='{ "techOrder": ["html5", "youtube"] }'></video>
<br><br>
<button class="previous">Atras</button>
<button class="next">Siguiente</button>
<button class="jump">Reproducir otra vez</button>

    • 3