Picking up content within a tag

Question

I have this playlist script, in it I wanted the name of the video selected in the playlist turns to P tag

$(document).ready(function() {
  video = $("#video");
  nome = $("#nome");
  init();

  function init() {
    current = 0;
    playlist = $("#playlist");
    tracks = playlist.find("li a");
    len = tracks.length;
    playlist.find("a").click(function(e) {
      e.preventDefault();
      link = $(this);
      current = link.parent().index();
      run(link);
    });
    $("#anterior").on("click", function(e) {
      current--;
      if (current == len) {
        current = 0;
        link = playlist.find("a")[0];
      } else {
        link = playlist.find("a")[current];
      }
      run($(link));
    });
    $("#proximo").on("click", function(e) {
      current++;
      if (current == len) {
        current = 0;
        link = playlist.find("a")[0];
      } else {
        link = playlist.find("a")[current];
      }
      run($(link));
    });
  }

  function run(link) {
    video.src = link.attr("href");

    nome.innerHTML = link.innerHTML

    par = link.parent();
    par.addClass("active").siblings().removeClass("active");
    video.load();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<p id="nome"></p>
<video id="video" width="200px" controls class="player" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
	Video nao suportado
</video>
<div id="anterior">proximo</div>
<div id="proximo">anterior</div>
<ul id="playlist">
  <li class="active"><a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">Big Buck Bunny 1</a></li>
  <li><a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">Big Buck Bunny 2</a></li>
  <li><a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">Big Buck Bunny 3</a></li>
</ul>

Answer 1

To get the name at the beginning, you just take the value, so the function init() is started and tag <p>:

var nomevideo = $("#playlist .active").text();
$("#nome").text(nomevideo);

Note: it catches the tag <a> who is with the class .active, that is, active at the moment.

And then you can add inside the event click of the links, to assign the value in the tag <p>, whenever a link is clicked:

nomevideo = $(this).text();
$("#nome").text(nomevideo);

When you use the array of find(), you cannot set it directly in find, you need to set in a variable and then run:

tag_selecionada = $("a")[0];
link = playlist.find(tag_selecionada)

		$(document).ready(function() {
  video = $("#video");
  nome = $("#nome");
  init();

  function init(){
  	var nomevideo = $("#playlist .active").text();
  	$("#nome").text(nomevideo);
    current = 0;
    playlist = $("#playlist");
    tracks = playlist.find("li a");
    len = tracks.length;
    playlist.find("a").click(function(e) {
      e.preventDefault();
      link = $(this);
      current = link.parent().index();
      run(link);
      nomevideo = $(this).text();
  	  $("#nome").text(nomevideo);
    });
    $("#anterior").on("click", function(e) {
      current--;
      if(current < 0){
      	current = 0;
      }
      if(current == len){
        current = 0;
        tag_selecionada = $("a")[0];
        link = playlist.find(tag_selecionada).attr('href');
        $("#video").attr("src", link);
        nomevideo = playlist.find(tag_selecionada).text();
  	  	$("#nome").text(nomevideo);
      }
      else{
        tag_selecionada = $("a")[current];
        link = playlist.find(tag_selecionada).attr('href');
        $("#video").attr("src", link);
        nomevideo = playlist.find(tag_selecionada).text();
  	  	$("#nome").text(nomevideo);
      }
      run($(link));
    });
    $("#proximo").on("click", function(e) {
      current++;
      if(current == len){
        current = 0;
        tag_selecionada = $("a")[0];
        link = playlist.find(tag_selecionada).attr('href');
        $("#video").attr("src", link);
        nomevideo = playlist.find(tag_selecionada).text();
  	  	$("#nome").text(nomevideo);
      }
      else{
      	tag_selecionada = $("a")[current];
        link = playlist.find(tag_selecionada).attr('href');
        $("#video").attr("src", link);
        nomevideo = playlist.find(tag_selecionada).text();
  	  	$("#nome").text(nomevideo);
      }
      run($(link));
    });
  }

  function run(link) {
    par = link.parent();
    par.addClass("active").siblings().removeClass("active");
  }
});

<!DOCTYPE html>
 <html>
  <head>
    <meta charset = "utf-8">
    <title>teste</title>
  </head>
  <body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<p id="nome"></p>
	<video id="video" width="200px" controls class="player" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
		Video nao suportado
	</video>
	<button id="anterior">anterior</button>
	<button id="proximo">proximo</button>
	<ul id="playlist">
	  <li class="active"><a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">Big Buck Bunny 1</a></li>
	  <li><a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">Big Buck Bunny 2</a></li>
	  <li><a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">Big Buck Bunny 3</a></li>
	</ul>
   </body>
 </html>

Answer 2

my solution:

function run(link) {
  video.src = link.attr("href");
  par = link.parent();
  par.addClass("active").siblings().removeClass("active");
  title = $("#playlist .active").text();
  $(".nome").text(title);
  video.load();
  video.play();
  resetPlayer2();
}