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   2   3   4     
       5     8-33 课堂演示  6      76  77  78     
     
       79         
       80         
      
        81             
       
        
       
 82             
        83             
        84             
        85             
        86             
        87             
        88         
      
 89         
       90     
     
 91         167 168

转载于:https://www.cnblogs.com/Renyi-Fan/p/8207490.html

你可能感兴趣的文章