How to run plugin / library when changing video?

2019-04-28 06:53发布

站内文章 / jQuery
16 0 0

问题:

When executing the code the videoJS plugin replaces the HTML5 video player, and really happy, I said between me what I achieved.

But when clicking on the next video, even when returning to the first video, the plugin is lost, leaving me the default player of 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) => 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="#">Back</a>
      <a id="siguiente" href="#">Next</a>
    </nav>
    <nav id="enlaces" class="vids">
      <a class="link" href="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4">test1</a>
      Y<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 really if it works for several videos here the test: https://jsfiddle.net/bq81phfy/

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

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

回答1:

(Revised answer)

For the full code and demo, you can check my Fiddle here.

And my approach is as follows:

  • Only one video element for all the video links.

  • When displaying a non-video content, the video is hidden.

  • When displaying a video, the non-video content are removed.

And you can see what I changed/added from below code:

(The ... means your code, nothing changed there.)

$(document).ready(function() {
  function insertar_contenido(vid, elemento) {

    ...

    contenido = vid.find('video:first');
    var videojs = contenido.closest('.video-js');
    var exists = videojs.length >= 1;

    if (es_video) {
      if (exists) {
        vid.children('.non-video').remove();
        videojs.show();

        fuente = contenido.children('source');
        fuente.attr('src', url);
        fuente.attr('type', 'video/' + formato);

        contenido.attr('src', url);
        contenido.get(0).load();
      } else {
        ...

        vid.html('');
        vid.append(contenido);
      }
    } else {
      if (exists) {
        videojs.hide();
      }

      ...

      contenido.addClass('non-video');
      vid.append(contenido);
    }
    ...
  }

  ...
});

UPDATE

Actually, for inline content, the element should be initially hidden:

<div id="c_inline-1" style="display: none">
  <h3>Inline Content</h3>
  <p>Content goes here.</p>
</div>

And for that, I changed the contenido.append($("#c_" + id)) to:

contenido.append($("#c_" + id).html())

Demo here.

UPDATE 2

Alternatively, if you'd rather use a new video element for each video, then just call videojs() on the created video element. Just add these lines after the vid.append(contenido) in your original code:

if (es_video) {
  videojs(contenido.get(0));
}

Demo here.

UPDATE 3

I added this:

// If clicking on the same link, do nothing.
if (vid.data('elemento') === elemento.get(0)) {
  return;
}
vid.data('elemento', elemento.get(0));

and this:

// .non-video are always re-created.
vid.children('.non-video').remove();

to the insertar_contenido() function, which should fix this issue: "Click several times on the title of the listing iFrame and Inline. And the same content is doubling the same number of times you click".

Demo here.



标签： jquery html video.js
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~