Question

我编写的代码使用了真棒字体的图标来播放视频，例如：play，stop ...，然后将链接复制到了头部。但是，例如，当我单击图标播放按钮时，它不起作用！

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永远不是一个好方法，当您单击这些按钮时会触发一些事件，因为您的视频采用某种形式，我不知道为什么，它不应该采用某种形式，因此您应该添加{ {1}}用于监听点击事件。我添加了一个示例视频供您检查方法。将ID用于点击事件，并相应地执行功能。

event.preventDefault()

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

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，即使用下划线而不是空格，这样可以更容易地识别出它实际上是文件，而不是目录中的文件，例如{ {1}}。

第三，尝试更改您的dresses/fashion.mp4标签，使其看起来像这样：

video

最后，将您的JavaScript事件从HTML移到JavaScript。

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

注意：：您也可以使用// 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属性设置为处理函数，而不用调用addEventListener方法。

祝你好运。

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

3 个答案: