為什么我的視頻字體很棒的圖標在點擊時不起作用？

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方法。

祝你好運。