Why don't my font-awesome video icons work when clicked?

Issue

The following code uses font-awesome icons for video controls (E.G. play, stop, pause, etc…), however, when I run the following code, it doesn’t work as expected.

var lecteur = document.getElementById("mavideo");

function lecture() {
  lecteur.play();
}
function pause() {
  lecteur.pause();
}
function stop() {
  lecteur.pause();
  lecteur.currentTime = 0;
}
function avancer() {
  lecteur.currentTime += 10;
}
function reculer() {
  lecteur.currentTime -= 10;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<p>Here is our dresses in 2019</p>
<form>
  <video src="dresses fashion.mp4" width="1000" id="mavideo" > </video> 
  <br />
  <button onclick="lecture()"><i class="fas fa-play" style="font-size:36px;"></i> </button>
  <button onclick="pause()"><i class="fas fa-pause" style="font-size:36px;"></i> </button>
  <button  onclick="stop()"><i class="fas fa-stop" style="font-size:36px;"> </i> </button>
  <button onclick="reculer()"><i class="fas fa-caret-left" style="font-size:36px;"></i> </button>
  <button onclick="avancer()"><i class="fas fa-caret-right" style="font-size:36px;"></i></button>
</form>

What am I doing wrong?

Solution

First, put your HTML style="..." attributes in a CSS file or put them in between style tags.

<link type="text/css" rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<style type="text/css" media="all">
  /* NOTE: instead of using "<br />" use "margin-bottom" instead */
  video {width: 1000px; margin-bottom: 20px}
  i.fas {font-size: 36px}
</style>

NOTE: The link and style elements should go in the head element and the integrity & crossorigin attributes aren’t necessary so I’ve removed them.

Second, your video tags aren’t supposed to go in forms, move your video tag and it’s accompanying button tags to another (semantic) container, for example a section, like this:

<p>Here is our dresses in 2019</p>
<section class="video-container">
  <video src="dresses fashion.mp4" id="mavideo"></video> 
  <button><i class="fas fa-play"></i></button>
  <button><i class="fas fa-pause"></i></button>
  <button><i class="fas fa-stop"></i></button>
  <button><i class="fas fa-caret-left"></i></button>
  <button><i class="fas fa-caret-right"></i></button>
</section>

The source: dresses fashion.mp4 should be dresses_fashion.mp4, i.e. using an underscore instead of a space, this makes it easier to identify that this is actually a file and not a file in a directory, like dresses/fashion.mp4.

Third, try changing your video tag to look like this:

<video controls="true">
  <source src="path/to/video_name.mp4" type="video/mp4" />
  <source src="path/to/video_name.ogg" type="video/ogg" />
  <p class="fallback">Your browser does not support HTML5 videos.</p>
</video> 

Finally, move your JavaScript events from HTML to JavaScript.

// select the video element
var lecture = document.querySelector("#mavideo");

// play the video
document.querySelector(".fa-play").addEventListener("click", function() {
  lecture.play();
});

// pause the video
document.querySelector(".fa-pause").addEventListener("click", function() {
  lecture.pause();
});

// stop the video
document.querySelector(".fa-stop").addEventListener("click", function() {
  lecture.pause();
  lecture.currentTime=0;
});

// skip backwards by 10 seconds
document.querySelector(".fa-caret-left").addEventListener("click", function() {
  if(lecture.currentTime < (lecture.duration - 11)) {
    lecture.currentTime += 10;
  }
});

// skip forwards by 10 seconds
document.querySelector(".fa-caret-right").addEventListener("click", function() {
  if(lecture.currentTime > 10) {
    lecture.currentTime -= 10;
  }
});

NOTE: you could also use document.getElementsByClassName("...")[0] instead of document.querySelector.

NOTE: instead of calling the addEventListener method, you could set the onclick property to your handler function.

Good luck.

Answered By – LogicalBranch

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.