others - javascript - 为什么我的awesome字体图标的视频无法点击?

我编写了代码,用font-awesome作为视频的图标,例如: 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>

`

时间:

尝试这里代码


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



内联Javascript从来都不是一个好方法,当你点击这些按钮时有一些事件被触发,因为你的视频是一个表单,我不知道为什么它不应该是一个表单,所以,你应该添加event.preventDefault()来监听点击事件 。 我添加了一个示例视频来检查方法。 用于标识events事件,并相应执行相应功能。


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>

首先,将 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

第二你的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;


 }


});



注意: 你可以将onclick属性设置为处理函数,而不是调用addEventListener方法 。

注意 : 你也可以使用 , document.getElementsByClassName("...")[0] 而不是 document.querySelector

祝好运。

...