为什么我的视频字体很棒的图标在点击时不起作用？

Question

我写了一些代码，使用字体很棒的图标来控制视频，比如：播放、停止……然后我复制了头部的链接。 但是，例如，当我单击图标播放按钮时，它不起作用！

 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>

`

Answer 1

试试这个代码

<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" type="video/mp4" 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>

<script type="text/javascript">
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;
}
</script>

Answer 2

内嵌 javascript 从来都不是一个好方法，当你点击这些按钮时会触发一些事件，因为你的视频是在一个表单中，我不知道为什么，它不应该在一个表单中，所以你应该添加event.preventDefault()用于监听点击事件。 我添加了一个示例视频供您检查方法。 将 id 用于点击事件，并相应地执行功能。

 document.getElementById("play").onclick = function(event) { // click event event.preventDefault() // prevent anything else document.getElementById("mavideo").play() // play the video by it's id } document.getElementById("pause").onclick = function(event) { event.preventDefault() document.getElementById("mavideo").pause() } document.getElementById("stop").onclick = function(event) { event.preventDefault() document.getElementById("mavideo").pause() document.getElementById("mavideo").currentTime=0; } document.getElementById("avancer").onclick = function(event) { event.preventDefault() document.getElementById("mavideo").currentTime+=10; } document.getElementById("reculer").onclick = function(event) { event.preventDefault() document.getElementById("mavideo").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="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" width="1000" id="mavideo" > </video> <br> <button id="play"><i class="fas fa-play" style="font-size:36px;"></i> </button> <button id="pause"><i class="fas fa-pause" style="font-size:36px;"></i> </button> <button id="stop"><i class="fas fa-stop" style="font-size:36px;"> </i> </button> <button id="reculer"><i class="fas fa-caret-left" style="font-size:36px;"></i> </button> <button id="avancer"><i class="fas fa-caret-right" style="font-size:36px;"></i></button> </form>

Answer 3

首先，将您的 HTML style="..."属性放在 CSS 文件中或将它们放在style标记之间。

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

注意： link和style元素应该放在head元素中，并且integrity和crossorigin属性不是必需的，所以我已经删除了它们。

其次，您的video标签不应该出现在表单中，将您的视频标签及其随附的button标签移动到另一个（语义）容器，例如section ，如下所示：

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

来源： dresses fashion.mp4应该是dresses_fashion.mp4 ，即使用下划线而不是空格，这样可以更容易地识别这实际上是一个文件而不是目录中的文件，例如dresses/fashion.mp4 。

第三，尝试将您的video标签更改为如下所示：

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

最后，将您的 JavaScript 事件从 HTML 移动到 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;
  }
});

注意：您也可以使用document.getElementsByClassName("...")[0]而不是document.querySelector 。

注意：您可以将onclick属性设置为您的处理程序函数，而不是调用addEventListener方法。

祝你好运。