h5_自定义视频

最新推荐文章于 2024-04-17 10:54:16 发布

weixin_30750335

最新推荐文章于 2024-04-17 10:54:16 发布

阅读量188

点赞数

原文链接：http://www.cnblogs.com/zhangzhengyang/p/11260528.html

版权

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <link rel="stylesheet" href="css/style.css">
  7     <link rel="stylesheet" href="css/player.css">
  8 </head>
  9 <body>
 10    <figure>
 11        <figcaption>撩课视频</figcaption>
 12        <div class="player">
 13            <video src="source/BigBuck.m4v"></video>
 14            <div class="controls">
 15                <!--播放/暂停按钮-->
 16                <a href="javascript:;" class="switch itlike-play3"></a>
 17                <!--进度条-->
 18                <div class="progress">
 19                    <div class="line"></div>
 20                    <div class="bar"></div>
 21                </div>
 22                <!--当前播放的时间/视频总时长-->
 23                <div class="timer">
 24                    <span class="current">00:00:00</span> /
 25                    <span class="total">00:00:00</span>
 26                </div>
 27                <!--全屏和取消全屏-->
 28                <a href="javascript:;" class="expand itlike-enlarge"></a>
 29            </div>
 30        </div>
 31    </figure>
 32 
 33 <script src="js/jquery-3.3.1.js"></script>
 34 <script>
 35     //全屏
 36     let fullScreen = (element) =>{
 37         if (element.requestFullscreen) {
 38             element.requestFullscreen();
 39         } else if (element.msRequestFullscreen) {
 40             element.msRequestFullscreen();
 41         } else if (element.mozRequestFullScreen) {
 42             element.mozRequestFullScreen();
 43         } else if (element.webkitRequestFullscreen) {
 44             element.webkitRequestFullscreen();
 45         }
 46     };
 47 
 48     //退出全屏
 49     let exitFullscreen = () =>{
 50         if (document.exitFullscreen) {
 51             document.exitFullscreen();
 52         } else if (document.msExitFullscreen) {
 53             document.msExitFullscreen();
 54         } else if (document.mozCancelFullScreen) {
 55             document.mozCancelFullScreen();
 56         } else if (document.webkitExitFullscreen) {
 57             document.webkitExitFullscreen();
 58         }
 59     };
 60 
 61 
 62     $(function () {
 63         // 1. 获取video对象
 64         let video = $('video').get(0);
 65         let player = $('.player').get(0);
 66 
 67         // 2. 该视频已准备好开始播放
 68         video.oncanplay = function () {
 69             // 2.1 让视频标签显示出来
 70             $('video').show();
 71 
 72             // 2.2 获取视频的总时长
 73             let totalTime = formatTime(video.duration);
 74             // console.log(totalTime);
 75             // 2.3 显示到标签中
 76             $('.total').text(totalTime);
 77         };
 78 
 79         function formatTime(time) {
 80             // 小时
 81             let h = Math.floor(time / 3600);
 82             // 分钟
 83             let m = Math.floor(time % 3600 / 60);
 84             // 秒
 85             let s = Math.floor(time % 60);
 86             // 00:00:00
 87             return (h<10 ? '0' + h : h) + ':' + (m<10 ? '0' + m : m) + ':' + (s<10 ? '0' + s : s);
 88         }
 89 
 90         // 3. 播放和暂停
 91         $('.switch').on('click', function () {
 92             if($(this).hasClass('itlike-play3')){ // 播放
 93                 video.play();
 94                 // 切换图标
 95                 $(this).addClass('itlike-pause2').removeClass('itlike-play3');
 96             }else { // 暂停
 97                 video.pause();
 98                 // 切换图标
 99                 $(this).addClass('itlike-play3').removeClass('itlike-pause2');
100             }
101         });
102 
103         // 4. 控制进度条的显示
104         video.ontimeupdate = function () {
105             // 4.1 长度 = 当前的时间 / 总时长 * 100 + ‘%’
106             let w = video.currentTime / video.duration * 100 + '%';
107             console.log(w);
108             // 4.2 改变进度条的长度
109             $('.line').css('width', w);
110             // 4.3 显示播放的时长
111             $('.current').html(formatTime(video.currentTime));
112         };
113 
114         // 5. 全屏显示
115         $('.expand').on('click', function () {
116             if($(this).hasClass('itlike-enlarge')){ // 全屏
117                 fullScreen(player);
118             }else { // 取消全屏
119                exitFullscreen();
120             }
121         });
122 
123         // 6. 视频播放完成
124         video.onended = function () {
125             // 6.1 当前的时间归零
126             video.currentTime = 0;
127             // 6.2 切换图标
128             $('.switch').addClass('itlike-play3').removeClass('itlike-pause2');
129         };
130 
131         // 7. 快进/快退
132         $('.bar').on('click', function (event) {
133            // 点击位置x / bar 总长度 * 总时长 = 当前视频的播放位置
134            // 7.1 获取点击位置的x值
135            let offsetX = event.offsetX;
136            // alert(offsetX);
137            // 7.2 当前视频的播放位置
138            // let currentPos =  offsetX / $(this).width() * video.duration;
139            //  console.log(currentPos);
140            // 7.3 当前视频的播放位置 给到 currentTime
141            video.currentTime = offsetX / $(this).width() * video.duration;
142         });
143     });
144 </script>
145 </body>
146 </html>

  1 html{
  2     font-size: 10px;
  3 }
  4 
  5 a{
  6     text-decoration: none;
  7 }
  8 
  9 body{
 10     padding: 0;
 11     margin: 0;
 12     background-color: #f7f7f7;
 13 }
 14 
 15 figcaption{
 16     font-size: 2.5rem;
 17     text-align: center;
 18     margin: 2rem;
 19 }
 20 
 21 .player{
 22     width: 72rem;
 23     height: 36rem;
 24     background: #373737 url(../img/loading.gif) center/30rem no-repeat;
 25     position: relative;
 26     margin: 0 auto;
 27     border-radius: 0.5rem;
 28 }
 29 
 30 video{
 31     display: none;
 32     height: 100%;
 33     margin: 0 auto;
 34    /*
 35     position: absolute;
 36     left: 0;
 37     top: 0;
 38     width: 100%;
 39     height: 100%;
 40     object-fit: contain;
 41     */
 42 }
 43 
 44 video::-webkit-media-controls{
 45     display: none !important;
 46 }
 47 
 48 .controls{
 49     width: 70rem;
 50     height: 4rem;
 51     background-color: rgba(255, 255, 255, .2);
 52     position: absolute;
 53     left: 50%;
 54     bottom: 0.5rem;
 55     transform: translate(-50%);
 56     border-radius: 0.5rem;
 57     z-index: 99999;
 58     opacity: 0;
 59 }
 60 
 61 .player:hover .controls{
 62     opacity: 1;
 63     cursor: pointer;
 64 }
 65 
 66 /*播放/暂停*/
 67 .controls .switch{
 68     display: block;
 69     width: 2rem;
 70     height: 2rem;
 71     font-size: 2rem;
 72     color: #fff;
 73     position: absolute;
 74     left: 1.1rem;
 75     top: 1.1rem;
 76 }
 77 
 78 .controls .expand{
 79     display: block;
 80     width: 2rem;
 81     height: 2rem;
 82     font-size: 2rem;
 83     color: #fff;
 84     position: absolute;
 85     right: 1.1rem;
 86     top: 1.1rem;
 87 }
 88 
 89 /*进度条*/
 90 .progress {
 91     width: 43rem;height: 1rem;border-radius: 0.3rem;overflow: hidden;
 92     background-color: #555;cursor: pointer;position: absolute;top: 1.6rem;left: 4.5rem;
 93 }
 94 /*播放进度*/
 95 .progress .line {
 96     width: 0;
 97     height: 100%;
 98     background-color: #FFF;
 99     position: absolute;
100     top: 0;
101     left: 0;
102 }
103 .progress .bar {
104     width: 100%;
105     height: 100%;
106     opacity: 0;
107     position: absolute;
108     left: 0;
109     top: 0;
110     z-index: 1;
111 }
112 /*时间*/
113 .timer {
114     height: 2rem;
115     line-height: 2rem;
116     position: absolute;
117     left: 49rem;
118     top: 1.1rem;
119     color: #FFF;
120     font-size: 1.4rem;
121 }

转载于:https://www.cnblogs.com/zhangzhengyang/p/11260528.html

weixin_30750335

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5_自定义视频

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="css/style....
复制链接

扫一扫