html5--视频播放器实例

最新推荐文章于 2023-10-27 14:57:30 发布

weixin_34292924

最新推荐文章于 2023-10-27 14:57:30 发布

阅读量618

点赞数 1

html5--视频播放器实例

总结：

1、相对定位和绝对定位的区别，两者都是浮起来了

2、属性和方法都是有对象的，搞清楚对象之后，属性和方法就很好用了，我们一般可以用document.getElementById("video");来获取对象

3、在外部修改html属性的时候，innerHTML和style是相对的，前者关注内容，后者关注样式

4、我们可以用event来获取刚刚操作的那个对象，然后来修改它的样式和内容，用法是event.target，例如event.target.innerHTML=';'

5、视频的前进或者后退都是通过视频对象的currentTime属性来实现的

6、视频设置声音直接操作视频对象的volume对象即可

7、进度条的响应?window.onload方法+timeupdate事件，相对于每秒更新一次Progress

video.addEventListener('timeupdate',Progress)

8、offsetX,offsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标

var w=parseInt(document.getElementById("probar").style.width)

video.currentTime = video.duration * (event.offsetX /w);

这段代码时进度条改变之后更新video

9、截屏功能则只需要操作canvas的对象的drawImage方法即可，因为这个方法可以操作视频

10、下面是一波css属性，把这些单词记住就ok了

outline: none;去掉button的边框

border-radius: 10px;边框圆角

opacity: 0;设置为透明

font-family:'Webdings';设置字体

display: block;display属性

cursor: pointer;设置鼠标样式

background-image:linear-gradient(-30deg,rgb(8,0,0),rgb(32,0,0) 30%,rgb(120,0,0) 60%,rgb(250,0,0) 100%);线性渐变

animation: keframe 1s linear infinite;关键帧动画

  1 <!DOCTYPE html>
  2 <html lang="zh-cn">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>8-33 课堂演示</title>
  6     <style type="text/css">
  7         /*父亲设置定位属性，孩子好偏移*/
  8         #main{
  9             width: 800px;height: 600px;
 10             position: relative;
 11         }
 12         /*都是按钮*/
 13         button{
 14             outline: none;
 15         }
 16         /* 播放控件区*/
 17         .bar{
 18             border:1px solid;
 19             position: relative;
 20             width: 100%;height: 15%;
 21             background: #ccc;
 22             border-radius: 10px;
 23             opacity: 0;
 24         }
 25         .bar:hover{
 26             opacity: 1;
 27         }
 28         #playorpause,.next,.back,.muted0,#vol,.pic{
 29             display: block;background: orange;
 30             border-radius: 48px;cursor: pointer;position: absolute;
 31             font-family:'Webdings';
 32             font-size:48px;color: green;
 33         }
 34         #playorpause{
 35             bottom: 20%;left: 45%;    
 36         }
 37         .next{
 38             bottom: 20%;left: 55%;
 39         }
 40         .back{
 41             bottom: 20%;left: 35%;
 42         }
 43         .muted0{
 44             width: 48px; height:48px;
 45             font-size: 42px;
 46             bottom: 23%;right: 25%;
 47         }
 48         #vol{
 49             width: 20%;
 50             bottom: 40%;right: 2%;
 51         }
 52         .pic{
 53             bottom: 20%;left: 20%;
 54             background: white;
 55         }
 56         #progress{
 57             position: absolute;
 58             height: 15px;
 59             width: 10px;
 60             border-radius: 10px;
 61 
 62             background-size: 30px 20px;
 63             background-image:linear-gradient(-30deg,rgb(8,0,0),rgb(32,0,0) 30%,rgb(120,0,0) 60%,rgb(250,0,0) 100%);
 64             animation: keframe 1s linear infinite;
 65         }
 66         #probar{
 67             background:rgba(10,30,10,0.3);
 68             height:15px;
 69         }
 70         @keyframes keframe
 71         {
 72             0%   {background-position: 0 0}
 73             100% {background-position: 60px 10px}
 74         }
 75     </style>
 76 </head>
 77 <body>
 78     <div id="main">
 79         <video id="video" src="qsmy.mp4" controls="controls" width="800"></video>
 80         <div class="bar">
 81             <div id="probar" style="width: 800px;"><div id="progress"></div></div>
 82             <button id="playorpause" onclick="PlayOrPause()">4</button>
 83             <button  class="next" onclick="Next()">8</button>
 84             <button  class="back" onclick="Prev()">7</button>
 85             <button  class="muted0" onclick="Muted()">X</button>
 86             <input id="vol" type="range" min="0" max="1" step="0.1" onchange="Volume()">
 87             <button class="pic" onclick="CatchPicture()"><img src="xj2.png" alt="" width="48"></button>
 88         </div>
 89         <canvas id="canvas" width="800" height="600"></canvas>
 90     </div>
 91     <script>
 92         var video = document.getElementById("video");
 93     //播放和暂停
 94     function PlayOrPause(e)
 95     {
 96         if(video.paused)
 97         {
 98             //1、style怎么来
 99             //2、event怎么用
100             //3、innerHTML和style是并列的，一个设置内容一个设置样式
101             video.play();
102             event.target.innerHTML=';'
103             event.target.style.color='red'  
104         }
105         else{
106             video.pause();
107             event.target.innerHTML='4' 
108             event.target.style.color='green'  
109         }
110     }
111     //前进和后退
112     function Prev(){
113         video.currentTime-=60;
114     }
115     function Next(){
116         video.currentTime+=60;
117     }
118     //设置静音
119     function Muted(){
120         if (video.muted) {
121              //从静音到非静音的操作
122              video.muted=false;
123              event.target.innerHTML='X'
124              event.target.style.background='orange'
125              document.getElementById('vol').value=video.volume
126 
127          }else{
128              //设置静音操作
129              video.muted=true;
130              event.target.innerHTML='x'
131              event.target.style.background='white'
132              document.getElementById('vol').value=0;    
133          }
134      }
135     //设置声音
136     function Volume(){
137         //event的target对象
138         video.volume=event.target.value;
139     }
140      //进度条
141      function Progress(){
142          var progress=document.getElementById('progress')
143          progress.style.width=(video.currentTime/video.duration)*100+'%'
144      }
145      window.onload=function(){
146          var progress=document.getElementById("progress");
147          var probar=document.getElementById("probar");
148          probar.addEventListener('click',progress_click)
149          video.addEventListener('timeupdate',Progress)
150      }
151      function progress_click(){
152          var progress=document.getElementById("progress");
153          var w=parseInt(document.getElementById("probar").style.width)
154         //alert(event.offsetX/w)  //offsetX,offsetY    发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
155         if(event.offsetX){
156             video.currentTime = video.duration * (event.offsetX /w);
157         }
158     }
159 
160     function CatchPicture(){
161         var canvas=document.getElementById("canvas");
162         var ctx=canvas.getContext('2d');
163         ctx.clearRect(0,0,canvas.width,canvas.height)
164         ctx.drawImage(video,0,0,canvas.width,canvas.height);
165     }
166 </script>    
167 </body>
168 </html>

weixin_34292924

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5--视频播放器实例

html5--视频播放器实例总结：1、相对定位和绝对定位的区别，两者都是浮起来了2、属性和方法都是有对象的，搞清楚对象之后，属性和方法就很好用了，我们一般可以用document.getElementById("video");来获取对象3、在外部修改html属性的时候，innerHTML和style是相对的，前者关注内容，后者关注样式4、我们可以用event来获取刚刚操作的那个...
复制链接

扫一扫