Home / user-103793

Lou's questions

Martin Hope
Lou
Asked: 2020-04-14 22:51:49 +0800 CST
  • 1

I am replacing an old code from an article I found, the following code is responsible for creating datajson

<?php
require_once ("Conexion.php");
$memberId = 1;
$sql = "SELECT comentario.*,megusta_nomegusta.like_unlike FROM comentario LEFT JOIN megusta_nomegusta ON comentario.comentario_id = megusta_nomegusta.comentario_id AND member_id = " . $memberId . " ORDER BY parent_comentario_id asc, comentario_id asc";

$result = mysqli_query($conn, $sql);
$record_set = array();
while ($row = mysqli_fetch_assoc($result)) {
    array_push($record_set, $row);
}
mysqli_free_result($result);

mysqli_close($conn);
echo json_encode($record_set);
?>

And this prints the following output:

[{"comentario_id":"14","parent_comentario_id":"0","comment":"The system coment is perfect!","comment_sender_name":"Lou","date":"2019-04-14 05:45:09","like_unlike":null},
{"comentario_id":"18","parent_comentario_id":"0","comment":"","comment_sender_name":"","date":"2019-04-14 06:23:15","like_unlike":null},
{"comentario_id":"19","parent_comentario_id":"0","comment":"My new code php","comment_sender_name":"YouLive","date":"2019-04-14 06:28:33","like_unlike":null},
{"comentario_id":"20","parent_comentario_id":"0","comment":"j","comment_sender_name":"j","date":"2019-04-14 06:36:09","like_unlike":null},
{"comentario_id":"21","parent_comentario_id":"0","comment":"aaa","comment_sender_name":"aaaaaaa","date":"2019-04-14 06:38:34","like_unlike":null},
{"comentario_id":"15","parent_comentario_id":"14","comment":"Yes","comment_sender_name":"Mario","date":"2019-04-14 05:46:23","like_unlike":null},
{"comentario_id":"16","parent_comentario_id":"15","comment":":)","comment_sender_name":"Lou","date":"2019-04-14 05:46:45","like_unlike":null},
{"comentario_id":"17","parent_comentario_id":"16","comment":"Only allow. three levels of comment. ** This comment should not exist in fourth level **","comment_sender_name":"Lou","date":"2019-04-14 05:57:41","like_unlike":null}]

Now in the process of replacing I have the following code:

<?php
$memberId = 1;
$stmt = $conn->prepare("SELECT comentario.*,megusta_nomegusta.like_unlike FROM comentario LEFT JOIN megusta_nomegusta ON comentario.comentario_id = megusta_nomegusta.comentario_id AND member_id=? ORDER BY parent_comentario_id ASC, comentario_id ASC");
$stmt->bind_param("i",$memberId);
$stmt->execute();
$stmt->store_result();

$member = array();
$stmt->bind_result(
    $member['comentario_id'],
    $member['parent_comentario_id'],
    $member['comment'],
    $member['comment_sender_name'],
    $member['date'],
    $member['id']
);

while ($stmt->fetch()) {
    //array_push($member);
    echo json_encode($member);
}

//echo json_encode($member);

And this prints the following output:

{"comentario_id":14,"parent_comentario_id":0,"comment":"The system coment is perfect!","comment_sender_name":"Lou","date":"2019-04-14 05:45:09","id":null}
{"comentario_id":18,"parent_comentario_id":0,"comment":"","comment_sender_name":"","date":"2019-04-14 06:23:15","id":null}
{"comentario_id":19,"parent_comentario_id":0,"comment":"My new code php","comment_sender_name":"YouLive","date":"2019-04-14 06:28:33","id":null}
{"comentario_id":20,"parent_comentario_id":0,"comment":"j","comment_sender_name":"j","date":"2019-04-14 06:36:09","id":null}
{"comentario_id":21,"parent_comentario_id":0,"comment":"aaa","comment_sender_name":"aaaaaaa","date":"2019-04-14 06:38:34","id":null}
{"comentario_id":15,"parent_comentario_id":14,"comment":"Yes","comment_sender_name":"Mario","date":"2019-04-14 05:46:23","id":null}
{"comentario_id":16,"parent_comentario_id":15,"comment":":)","comment_sender_name":"Lou","date":"2019-04-14 05:46:45","id":null}
{"comentario_id":17,"parent_comentario_id":16,"comment":"Only allow. three levels of comment. ** This comment should not exist in fourth level **","comment_sender_name":"Lou","date":"2019-04-14 05:57:41","id":null}

It is almost perfect, I even thought that it would work but unfortunately it did not work, my code jsonlacks the []opening and closing brackets, in addition to separating each closing of the braces },by commas and each of the data separated by quotes "".

Can you explain to me what I need to get the data jsonlike the old code.

php
Martin Hope
Lou
Asked: 2020-04-05 05:13:58 +0800 CST
  • 8

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
Martin Hope
Lou
Asked: 2020-04-04 10:16:16 +0800 CST
  • 1

This way I store the data $data[$type_format][] = $url;and by using the foreach ($data['video'] as $url)I get all the URLs mp4of the video.

From the following table:

id    title    type_format    url    detail_text
1    title1       video      1.mp4     NULL
1    title2       video      2.mp4     NULL
1    title3       video      3.mp4     NULL
1    title1       text        NULL     detalle1

Getting the following printout:

<a class="link" href="1.mp4"></a>
<a class="link" href="2.mp4"></a>
<a class="link" href="3.mp4"></a>

Using the following code:

    $stmt->bind_result($title, $type_format, $url, $detail_text);

    $data = [
      'text'  => [],
      'video' => [],
    ];

    while ($stmt->fetch()) {
        $data[$type_format][] = $url;
    }

    echo '<nav id="enlaces" class="vids">';
    foreach ($data['video'] as $url) {
      echo '<a class="link" href="'.$url.'">'.$title.'</a>';
    }
    echo '</nav>';

Now my question is: How to send more data to the foreach in order to print its respective title of each link?

to get the following result

<a class="link" href="1.mp4">title1</a>
<a class="link" href="2.mp4">title2</a>
<a class="link" href="3.mp4">title3</a>

Update

            $stmt = $con->prepare("SELECT title,type_format,url,detail_text FROM videos");
            $stmt->execute();
            $stmt->store_result();

            $stmt->bind_result($title, $type_format,$url,$detail_text);

            $i = 1;
            while ($stmt->fetch()) {
                echo '<nav id="enlaces" class="vids">';
                echo '<a class="link" href="'.$url.'">'.$title.'</a>';
                echo '</nav>';

                echo '<div id="ocultado" style="display: none">';
                echo '<div class="cuadro" id="c_link_'.$i.'" >'.$detail_text.'</div>';
                echo '</div>';

            $i++;

            }
php
Martin Hope
Lou
Asked: 2020-03-04 19:31:52 +0800 CST
  • 0

I'm using a jQuery function, which allows to open a link automatically:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
         $('#some')[0].click();
    });
</script>
<a id="some" href="https://es.stackoverflow.com/">Automatico</a>

Can you explain to me how to make this function execute but after xseconds or minutes have passed.

jquery
Martin Hope
Lou
Asked: 2020-02-18 12:52:45 +0800 CST
  • 15

Through a great contribution, by @ArtEze I have a list where I can send and receive data in specific tags without reloading the example page, if the list is a video link, that video will be sent and played in a tag <video></video>, yes is a website, it will run in a tag <iframe>, each information in their respective tags.

It can be verified in the following complete code:

$(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()
		if(es_video){
			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.on('waiting', mostrar)
			contenido.on('canplay', ocultar)
			contenido.append(fuente)
		}else{
			contenido = $(document.createElement("iframe"))
			contenido.attr("src",url)
			contenido.on('load', ocultar)
		}
		vid.html("")
		vid.append(contenido)
		$(".vids a").removeClass("playing")
		elemento.addClass("playing")
	}

	var vid = $('#myvid')
	var primer_elemento = $("a.link:first")

	insertar_contenido(vid,primer_elemento)
	primer_elemento.addClass("playing")

	$("a.link").on("click" , function(event){
		event.preventDefault()
		var esto = $(this)
		insertar_contenido(vid,esto)
	})
})
.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;
    font-family: tahoma;
    text-align: center;
    padding: 2em;
    display: block;
    margin: auto;
    background-color: #A97A7A;
}
.container {
    width: 960px;
    background: #010101;
    margin: auto;
    position: relative;
    height: 460px;
}
.vidcontainer {

	width: 75%;
    height: 100%;
    float: right;
    position: relative;
    overflow: hidden;
}
video {
    width: 100%;
    height: 405px;
    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;
    min-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: 405px;
    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">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.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 class="link" href="https://en.wikipedia.org/wiki/Main_Page">test1</a>
      <a class="link" href="https://legacy.datatables.net/usage/columns">test2</a>
      <a class="link" href="https://stackoverflow.com/">test3</a>
      <a class="link" href="http://futbolworldcup.com/">test4</a>
      <a class="link" href="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4">test5</a>
      <a class="link" href="http://www.html5videoplayer.net/videos/toystory.mp4">test6</a>
      <a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/H264/Other_Media/H264_test8_voiceclip_mp4_480x320.mp4">test7</a>
      <a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/MP4/ConvertedFiles/Media-Convert/Unsupported/dw11222.mp4">test8</a>
      <a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/MP4/ConvertedFiles/Media-Convert/Unsupported/test7.mp4">tsest9</a>
      <a class="link" href="#">tsest10</a>
      <div class="text-data"><span>Contenido e información del enlace test10</span></div>
      <a class="link" href="#">tsest11</a>
      <div class="text-data"><span>Contenido e información del enlace test11</span></div>
      <a class="link" href="#">tsest12</a>
      <div class="text-data"><span>Contenido e información del enlace test12</span></div>
    </nav>
  </div>
</div>

I have seen the need to also be able to transport all the information that this div contains <div class="text-data"></div>, its text and even its labels, images, everything that this div contains, transfer that information to the design box when clicking on the tses10 link .

Había pensado, que siguiendo el mismo patrón o el mismo funcionamiento del código jQuery traspasar al texto cuando en el href="#" exista el símbolo numeral #.

Investigando un poco encontré esté código

$(document).ready(function() {
    $("a").click(function() {
        $("#lorem").html($(this).html());
    });
});

¿Pero como lo puedo adaptar al código jQuery? Sobre todo el problema persiste porque en el código jQuery ya existe patrones u funcionalidades que permite poder ejecutar información según lo que este enlazado, como los sitios web en los <iframe>, los vídeos en las etiquetas <video>.

jquery
Martin Hope
Lou
Asked: 2020-02-18 07:22:57 +0800 CST
  • 13

I'm having trouble with my Read-More code , if in some circumstances the minimum characters to display are within a tag, eg;

<div class="toggole-text">
    <div>Back to School Week has been a major success in the past. The week has connected thousands of alumni with their old schools so they can inspire current students as career and education role models. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, odio? Consequuntur expedita neque cumque necessitatibus natus, beatae modi. <br><br> Back to School Week has been a major success in the past. The week has connected thousands of alumni with their old schools so they can inspire current students as career and education role models. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, odio? Consequuntur expedita neque cumque necessitatibus natus, beatae modi. </div>
</div>

The jQuery code does not count these characters, resulting in an unexpected result, that is, the entire content of the text will be displayed in such a way: https://jsfiddle.net/qe6dyt9n/

Because jQuery code doesn't count characters that are inside other html tags.

But if there is any text without being inside another tag except for the div <div class="toggle-text"></div>, the code would work:

<div class="toggole-text">
    Back to School Week has been a major success in the past. The week has connected thousands of alumni with their old schools so they can inspire current students as career and education role models. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, odio? Consequuntur expedita neque cumque necessitatibus natus, beatae modi. <br><br> Back to School Week has been a major success in the past. The week has connected thousands of alumni with their old schools so they can inspire current students as career and education role models. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, odio? Consequuntur expedita neque cumque necessitatibus natus, beatae modi. 
</div>

As long as that text goes past the minimum characters var showChar = 190;, resulting in nice functionality example: https://jsfiddle.net/qe6dyt9n/1/

But I can not be aware that these conditions will always be met, in this case it is true that the code works, because it is a code that has been thoroughly edited to the expectations that the jQuery code should receive, but in the case that other users publish a post or an article through from the text editor, such as the WYSIWYG plugin, you should know that these types of editors add to all text / characters or paragraphs within a tag according to the functionalities or styles / functions that are added to the text from that editor.

The full code or at https://jsfiddle.net/xp64zdom/

$(function() {
		var showChar = 190;  // How many characters are shown by default
		var ellipsestext = "...";
		var moretext = "Read more";
		var lesstext = "Read less";

		//Cut content based on showChar
		if ($(".toggle-text").length) {
			$(".toggle-text").each(function() {
				var content = $(this).html();
				console.log(content);

				if(content.length > showChar) {
					var contentExcert = content.substr(0, showChar);
					var contentRest = content.substr(showChar, content.length - showChar);
					var html = contentExcert + '<span class="toggle-text-ellipses">' + ellipsestext + ' </span> <span class="toggle-text-content"><span>' + contentRest + '</span><a href="javascript:;" class="toggle-text-link">' + moretext + '</a></span>';
					$(this).html(html);				
				}
			});
		}

		//Toggle content when click on read more link
		$(".toggle-text-link").click(function() {
			if($(this).hasClass("less")) {
				$(this).removeClass("less");
				$(this).html(moretext);
			} else {
				$(this).addClass("less");
				$(this).html(lesstext);
			}
			$(this).parent().prev().toggle();
			$(this).prev().toggle();
			return false;
		});
	});
.toggle-text {
			max-width: 400px;
		}
		.toggle-text-content span {
			display: none;
		}
		.toggle-text-link {
			display: block;
			margin: 20px 0;
		}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggle-text">
	<h4>Descripción</h4>
	<div>
		<p>Back to School Week has been a major success in the past. The week has connected thousands of alumni with their old schools so they can inspire current students as career and education role models. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, odio? Consequuntur expedita neque cumque necessitatibus natus, beatae modi.</p><br>

		<p>
			<ul class="list-style-disc">
				<li>Cuando prepara su café, utiliza lógica.</li>
				<li>Cuando vas a la escuela, utiliza lógica.</li>
				<li>Y hasta para invertir en un curso usted utiliza lógica.</li>
			</ul>
		</p><br>

		<p>Back to School Week has been a major success in the past. The week has connected thousands of alumni with their old schools so they can inspire current students as career and education role models. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, odio? Consequuntur expedita neque cumque necessitatibus natus, beatae modi.</p><br>

		<p>
			<ul class="list-style-disc">
				<li>Usted necesita desarrollar un sitio web, lógica de programación.</li>
				<li>Un software, necesita lógica de programación.</li>
				<li>Un informe sensacional en Excel, lógica de programación.</li>
			</ul>
			Una aplicación móvil para su jefe / cliente de acceso en cualquier momento, desde cualquier lugar... necesita lógica de programación.
		</p><br>

		<p>Back to School Week has been a major success in the past. The week has connected thousands of alumni with their old schools so they can inspire current students as career and education role models. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, odio? Consequuntur expedita neque cumque necessitatibus natus, beatae modi.</p><br>

		<p>Back to School Week has been a major success in the past. The week has connected thousands of alumni with their old schools so they can inspire current students as career and education role models. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, odio? Consequuntur expedita neque cumque necessitatibus natus, beatae modi.</p><br>

		<p>Back to School Week has been a major success in the past. The week has connected thousands of alumni with their old schools so they can inspire current students as career and education role models. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, odio? Consequuntur expedita neque cumque necessitatibus natus, beatae modi.</p><br>

		<p>Back to School Week has been a major success in the past. The week has connected thousands of alumni with their old schools so they can inspire current students as career and education role models. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, odio? Consequuntur expedita neque cumque necessitatibus natus, beatae modi.</p><br>

		<p>Back to School Week has been a major success in the past. The week has connected thousands of alumni with their old schools so they can inspire current students as career and education role models. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, odio? Consequuntur expedita neque cumque necessitatibus natus, beatae modi.</p><br>

		<p>Back to School Week has been a major success in the past. The week has connected thousands of alumni with their old schools so they can inspire current students as career and education role models. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, odio? Consequuntur expedita neque cumque necessitatibus natus, beatae modi.</p><br>
	</div>
	<div class="heading-part">
		<h4>¿Temas de interes?</h4>
			<ul class="list-style-disc">
				<li>Programadores.</li>
			</ul>
	</div>
</div>

The idea of ​​all this work is to show the reader a certain part of a text and, through a Read-More link, display the rest of the hidden text so that the reader continues with all the reading, of course there is also the possibility of hiding the text via a Read-Less binding .

Can you explain me what changes or what code should I add to the jQuery code, so that the code counts all the characters whether those characters are only inside the div without any other tag and, likewise regardless of whether those characters are inside other tags or not counting them the same so as not to present those problems that I have detailed.

Is there that possibility of counting all the characters that are inside the div <div class="toggle-text"></div>regardless of whether or not that text is inside other tags HTML, either p, div, span, ul, lior others?

jquery
Martin Hope
Lou
Asked: 2020-01-24 13:29:52 +0800 CST
  • 7

In the list of loading previous pages, a loading works very well when dealing with web pages...

But when loading a video iframe .mp4the loading stays always active, it doesn't disappear unlike loading a website.

For example, when clicking on test5, which is the loading of a video, the pre-loading remains active and does not disappear

This is the code :) or in jsfiddle

function ocultarLoad(){
 $('.loading').fadeOut(100);
}

$(document).ready(function(){

	var vid = $('#myvid');

	//default video source
    $(vid).attr("src", $("a.link:first").attr("href"));

    // addClass playing to first video link
    $("a.link:first").addClass("playing");


$("a.link").on("click" , function  (event) {

	// prevent link default
    event.preventDefault();
 $('.loading').fadeIn(200);
    // change video source
    $(vid).attr("src", $(this).attr("href"));

    // remouve class playing from unplayed video href
    $(".vids a").removeClass("playing");

    // add class playing to video href
    $(this).addClass("playing");

    // add class paused to give the play/pause button the right look  
    $('.btnPlay').addClass('paused');
    
    
    // play the video
    vid[0].play();
   
});


//VIDEO EVENTS
    //video canplay event
    vid.on('canplay', function() {
        $('.loading').fadeOut(100);
    });
    
    //video waiting for more data event
    vid.on('waiting', function() {
        $('.loading').fadeIn(200);
    });
//end
});
.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;
    font-family: tahoma;
    text-align: center;
    padding: 2em;
    display: block;
    margin: auto;
    background-color: #A97A7A;
}
.container {
    width: 960px;
    background: #010101;
    margin: auto;
    position: relative;
    height: 460px;
}
.vidcontainer {

	width: 75%;
    height: 100%;
    float: right;
    position: relative;
    overflow: hidden;
}

video {
    width: 100%;
    height: 405px;
    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;
    min-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: 405px;
    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">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<div class="container">
<div class="vidcontainer">
<iframe id="myvid" onload="ocultarLoad();" >

  Your browser does not support the video tag.
  
</iframe>


<div class="loading">
	<i class="fa fa-spinner fa-spin"></i>
</div>
    </div>

	<div class="videolist">
		<nav class="vids">
<a class="link" href="https://en.wikipedia.org/wiki/Main_Page">test1</a>

			<a class="link" href="http://legacy.datatables.net/usage/columns">test2</a>

			<a class="link" href="https://stackoverflow.com/">test3</a>

			<a class="link" href="http://futbolworldcup.com/">test4</a>

			<a class="link" href="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4">test5</a>

			<a class="link" href="http://www.html5videoplayer.net/videos/toystory.mp4">test6</a>

			<a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/H264/Other_Media/H264_test8_voiceclip_mp4_480x320.mp4">test7</a>

			<a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/MP4/ConvertedFiles/Media-Convert/Unsupported/dw11222.mp4">test8</a>

			<a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/MP4/ConvertedFiles/Media-Convert/Unsupported/test7.mp4">tsest9</a>
		</nav>
	</div>
</div>

How can I fix this error?

Note: I am using Chrome the current version, the preloading only disappears on websites and not on multimedia such as videos.

jquery
Martin Hope
Lou
Asked: 2020-12-28 09:56:34 +0800 CST
  • 2

I am implementing a multiple choice list, my idea is to be able to load content or pages dynamically without reloading the page through a iframe.

Everything seems to work fine, when you run it you can see that it loads the first site, but the loading remains active, that is, it does not disappear when loading the site.

On the other hand, in the list of the sites to load in iframeit they do not work like the first site.

Can you tell me what configurations I have to make in the code?

My code

$(document).ready(function(){
	var vid = $('#myvid');

	//default video source
    $(vid).attr("src", $("a.link:first").attr("href"));

    // addClass playing to first video link
    $("a.link:first").addClass("playing");


$("a.link").on("click" , function  (event) {

	// prevent link default
    event.preventDefault();
 
    // change video source
    $(vid).attr("src", $(this).attr("href"));

    // remouve class playing from unplayed video href
    $(".vids a").removeClass("playing");

    // add class playing to video href
    $(this).addClass("playing");

    // add class paused to give the play/pause button the right look  
    $('.btnPlay').addClass('paused');
    
    
    // play the video
    vid[0].play();
   
});


//VIDEO EVENTS
    //video canplay event
    vid.on('canplay', function() {
        $('.loading').fadeOut(100);
    });
    
    //video waiting for more data event
    vid.on('waiting', function() {
        $('.loading').fadeIn(200);
    });
//end
});
.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;
    font-family: tahoma;
    text-align: center;
    padding: 2em;
    display: block;
    margin: auto;
    background-color: #A97A7A;
}
.container {
    width: 960px;
    background: #010101;
    margin: auto;
    position: relative;
    height: 460px;
}
.vidcontainer {

	width: 75%;
    height: 100%;
    float: right;
    position: relative;
    overflow: hidden;
}

video {
    width: 100%;
    height: 405px;
    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;
    min-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: 405px;
    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">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<div class="container">
<div class="vidcontainer">
<iframe id="myvid" >

  Your browser does not support the video tag.
  
</iframe>


<div class="loading">
	<i class="fa fa-spinner fa-spin"></i>
</div>
    </div>

	<div class="videolist">
		<nav class="vids">
<a class="link" href="https://en.wikipedia.org/wiki/Main_Page">test1</a>

			<a class="link" href="http://legacy.datatables.net/usage/columns">test2</a>

			<a class="link" href="https://stackoverflow.com/">test3</a>

			<a class="link" href="http://futbolworldcup.com/">test4</a>

			<a class="link" href="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4">test5</a>

			<a class="link" href="http://www.html5videoplayer.net/videos/toystory.mp4">test6</a>

			<a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/H264/Other_Media/H264_test8_voiceclip_mp4_480x320.mp4">test7</a>

			<a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/MP4/ConvertedFiles/Media-Convert/Unsupported/dw11222.mp4">test8</a>

			<a class="link" href="http://download.wavetlan.com/SVV/Media/HTTP/MP4/ConvertedFiles/Media-Convert/Unsupported/test7.mp4">tsest9</a>
		</nav>
	</div>
</div>

jquery