很多小伙伴们都有在网页中进行观看视频的习惯，那么大家知道这是怎么进行播放的吗？那么今天我们就来说说：“HTML5中视频播放(video)和JavaScript控制视频效果怎么实现？”这个问题吧！
具体代码如下所示：
<html>
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
figcaption {
text-align: center;
line-height: 150px;
font-family: "Microsoft Yahei";
font-size: 24px;
}
.player {
width: 720px;
height: 360px;
margin: 10px auto;
border: 1px solid #000;
background-color: #000;
position: relative;
border-radius: 6px;
}
.player video {
width: 720px;
height: 360px;
}
.controls {
width: 700px;
height: 40px;
background-color: rgba(255,255,0,0.3);
position: absolute;
bottom: 10px;
left: 10px;
border-radius: 10px;
}
.switch {
position: absolute;
width: 22px;
height: 22px;
background-color: red;
left: 10px;
top: 9px;
border-radius: 50%;
}
.progress {
width: 432px;
height: 10px;
position: absolute;
background-color: rgba(255,255,255,0.4);
left: 40px;
top: 15px;
border-radius: 4px;
overflow: hidden;
}
.curr-progress {
width: 0%;
height: 100%;
background-color: #fff;
}
.time {
width: 120px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: #fff;
position: absolute;
left: 510px;
top: 10px;
}
.extend {
position: absolute;
width: 20px;
height: 20px;
background-color: red;
right: 10px;
top: 10px;
}
style>
head>
<body>
<figure>
<figcaption>视频案例figcaption>
<div>
<video src=https://www.qianu.com/static/image/nopic320.png>总结
通过这篇文章的分享，想必到大家对于：“HTML5中视频播放(video)和JavaScript控制视频效果怎么实现？”这个问题有所了解了吧！当然更多有关于html5这方面的内容我们都可以在W3Cschool中进行学习和了解。
浙公网安备33010502012242号