前端学习——简单的视频播放
效果链接最终效果演示视频
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="../css/less2.css"/>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
html,body{
height: 100%;
overflow: hidden;
}
</style>
<body>
<div id="wrap">
<video src="../video/myvideo.mp4" poster="../img1/3.jpg" ></video>
<div class="down">
<div class="left">
<span class="start"></span>
<span class="stop"></span>
</div>
<div class="process">
<div class="inner">
<div class="dian"></div>
</div>
<div class="pro"></div>
</div>
<div class="right">
<div class="time">
<span class="now">00:00:00</span>/<span class="all">00:00:00</span>
</div>
<div class="sound">
<div class="in">
<span></span>
</div>
<div class="process">
<div class="inner">
<div class="dian"></div>
</div>
<div class="pro"></div>
</div>
</div>
<div class="full-screen">
<span></span>
</div>
</div>
</div>
</div>
</body>
<script src="../js/drag.js"></script>
<script type="text/javascript">
window.onload=function(){
var video=document.querySelector("#wrap > video");
var down=document.querySelector("#wrap > .down");
var dian=document.querySelector("#wrap > .down > .process > .inner > .dian");
var process=document.querySelector("#wrap > .down > .process");
var pro=document.querySelector("#wrap > .down > .process > .pro"
最低0.47元/天 解锁文章
943
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
