[英]Why my font-awesome icons for a video does not work on click?
I wrote some code that uses font-awesome icons for video controls like: play,stop... and I copied the link in the head.我写了一些代码,使用字体很棒的图标来控制视频,比如:播放、停止……然后我复制了头部的链接。 But, when I click on the icon play button, for example, it doesn't work!
但是,例如,当我单击图标播放按钮时,它不起作用!
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>
` `
Try this code试试这个代码
<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>
Inline javascript is never a good approach, there is some event firing when you click those buttons because your video is in a form, I don't know why, it shouldn't be in a form, so you should add event.preventDefault()
for listening to click events.内嵌 javascript 从来都不是一个好方法,当你点击这些按钮时会触发一些事件,因为你的视频是在一个表单中,我不知道为什么,它不应该在一个表单中,所以你应该添加
event.preventDefault()
用于监听点击事件。 I've added a sample video for you to check the methods.我添加了一个示例视频供您检查方法。 Use id's for click events, and perform the functions accordingly.
将 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>
First, put your HTML style="..."
attributes in a CSS file or put them in between style
tags.首先,将您的 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>
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.注意:
link
和style
元素应该放在head
元素中,并且integrity
和crossorigin
属性不是必需的,所以我已经删除了它们。
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:其次,您的
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>
The source: dresses fashion.mp4
should be dresses_fashion.mp4
, ie 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
.来源:
dresses fashion.mp4
应该是dresses_fashion.mp4
,即使用下划线而不是空格,这样可以更容易地识别这实际上是一个文件而不是目录中的文件,例如dresses/fashion.mp4
。
Third, try changing your video
tag to look like this:第三,尝试将您的
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>
Finally, move your JavaScript events from HTML to JavaScript.最后,将您的 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;
}
});
NOTE: you could also use document.getElementsByClassName("...")[0]
instead of document.querySelector
.注意:您也可以使用
document.getElementsByClassName("...")[0]
而不是document.querySelector
。
NOTE: instead of calling the addEventListener
method, you could set the onclick
property to your handler function.注意:您可以将
onclick
属性设置为您的处理程序函数,而不是调用addEventListener
方法。
Good luck.祝你好运。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.