HTML自定义播放器 解决不同浏览器样式不同问题

---

一、为什么要自定义视频播放器？

由于浏览器的内核不同，对各种CSS样式的解释也不同，对样式属性的默认值设置不同另外，浏览器对CSS样式的支持也不是全面的，各有各的不同，同一浏览器的不同版本对CSS的支持也是不一样的。

二、使用步骤

1.引入库

该案例使用的相关库

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>

2.视频事件与属性

视频播放属性
paused 判断视频是否为播放状态 true/false
currentTime 返回视频当前播放时间
duration 返回视频总长度

相关视频事件
ontimeupdate:当前时间即current改变时触发
onended:视频播放结束时触发
oncanplay:视频缓存完毕可播放状态时触发

注意事项：属性是原生js属性，使用时应该先转换

HTML+CSS

 <style>
        * {
   
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            vertical-align: middle;/*消除视频与控制部分的间隙*/
        }
        
        .contain {
   
            width: 500px;
            height: 320px;
            margin: 50px auto;
        }
        
        video {
   
            width: 500px;
        }
        
        .controls {
   
            width: 100%;
            height: 50px;
            background-color: #000;
        }
        
        .play {
   
            float: left;
            width: 30px;
            height: 30px;
            color: aliceblue;
            text-align: center;
            margin: 15px 0 0 5px;
            font-size: 20px;
            cursor: pointer;
        }
        
        .progress {
   
            float: left;
            width: 300px;
            height: 10px;
            margin: 20px 0 0 5px;
            background-color: #aaa;
            cursor: pointer;
            position: relative;
        }
        
        .ready {
   
            position: absolute;
            top: 0;
            left: 0;
            height: 10px;
            width: 250px;
            background-color: #ddd;
            display: none;
        }
        
        .playing {
   
            position: absolute;
            top: 0;