H5打造属于自己的视频播放器（JS篇1）

   <h2>回顾</h2>    <p>1） <a href="/misc/goto?guid=4959676822958329097" rel="nofollow,noindex">H5打造属于自己的视频播放器（HTML篇）</a></p>    <p>2） <a href="/misc/goto?guid=4959676823075637827" rel="nofollow,noindex">H5打造属于自己的视频播放器（逻辑篇）</a></p>    <h2>前言</h2>    <p>在HTML篇当中我们写好了样式，今天我们为video新增一个样式</p>    <pre>  <code class="language-css">.bad-video video {      width: 100%;      height: 100%;      display: block;      object-fit:fill;  }</code></pre>    <p>高,宽,内容，都充父元素</p>    <p>乳此一来，我们的HMTL元素内容为</p>    <pre>  <code class="language-html"><div class="bad-video">              <video webkit-playsinline>                  <source src='xx.mp4' type="video/mp4"></source>                  <p>设备不支持</p>              </video>                            <img src="img/play.png" class="vplay" />              <div class="controls">                  <div>                      <div class="progressBar">                          <div class="timeBar"></div>                      </div>                  </div>                  <div><span class="current">00:00</span>/<span class="duration">00:00</span></div>                  <div><span class="fill">全屏</span></div>              </div>          </div></code></pre>    <h2>吹着口哨写JS</h2>    <p>幸好我们在写JS之前，先整理好了逻辑思绪，并写好了笔记 <a href="/misc/goto?guid=4959676823075637827" rel="nofollow,noindex">H5打造属于自己的视频播放器（逻辑篇）</a></p>    <p>以下文章将要用到 号称 <strong>最接近原生APP体验的高性能前端框架</strong> 的 <a href="/misc/goto?guid=4959667075254791381" rel="nofollow,noindex"> <strong>MUI</strong> </a></p>    <p>首先，让我们来新建一个js文件，比如，bvd.js 并注册一下全局的一个入口</p>    <pre>  <code class="language-javascript">(function($){      var bvd = function(dom) {          this.dom = document.querySelector(dom || 'video');      }            var pro = bvd.prototype;            pro.test = function(){          console.log(this.dom)      }                  var nv = null;      $.bvd = function(dom) {          return nv || (nv = new bvd(dom));      }  }(mui))</code></pre>    <p>让我们在video.html引入bvd.js 并且来测试一下吧！</p>    <pre>  <code class="language-html"><scrpit src="js/mui.min.js"></script>  <script src="js/bvd.js"></script>          <script>              var v = mui.bvd();              v.test();          </script></code></pre>    <p><img src="https://simg.open-open.com/show/e2c396e313cd47c0187da23c63f7f655.png"></p>    <p>看来是ok的，与此同时，为了html页的简洁美观，我们将 <strong>播放按钮</strong> 和 <strong>控制条</strong> 用JS动态生成</p>    <pre>  <code class="language-javascript">(function($){      var bvd = function(dom) {          var that = this;          $.ready(function(){              //获取视频元素              that.video = document.querySelector(dom || 'video');              //获取视频父元素              that.vRoom = that.video.parentNode;              //元素初始化              that.initEm();          })      }            var pro = bvd.prototype;            pro.initEm = function(){          //先添加播放按钮          this.vimg = document.createElement("img");          this.vimg.src = 'img/play.png';          this.vimg.className = 'vplay';          this.vRoom.appendChild(this.vimg);                }                  var nv = null;      $.bvd = function(dom) {          return nv || (nv = new bvd(dom));      }  }(mui))</code></pre>    <p>这里有个小细节，如果img的src设置为本地资源的话，那么以后使用会出现很多问题，比如，页面层级发生变化时，你要去修改bvd.js，以免夜长梦多，我们将图片转为base64</p>    <p>再添加控制条</p>    <pre>  <code class="language-javascript">pro.initEm = function(){          //先添加播放按钮          this.vimg = document.createElement("img");          this.vimg.src = 'data:image/png;base64,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';          this.vimg.className = 'vplay';          this.vRoom.appendChild(this.vimg);                    //添加控制条          this.vC = document.createElement("div");          this.vC.classList.add('controls');          this.vC.innerHTML = '<div><div class="progressBar"><div class="timeBar"></div></div></div><div><span class="current">00:00</span>/<span class="duration">00:00</span></div><div><span class="fill">全屏</span></div>';          this.vRoom.appendChild(this.vC);                          }</code></pre>    <p>再把 video.html中的 播放按钮 和 控制条 注释，看看我们写的代码效果如何</p>    <p><img src="https://simg.open-open.com/show/96c65ecfa5d3d944f708b9852f2488cb.png"> 大家可以看到，红色是我们注释的，绿色的是我们js生成的，奈斯</p>    <h2>开始播放</h2>    <p>真正开始我们js篇的第一步啦</p>    <p>初始化事件，先写个播放按钮播放视频事件测试一下</p>    <pre>  <code class="language-javascript">//元素初始化              that.initEm();              //事件初始化              that.initEvent();    ----------        pro.initEvent = function(){          var that = this;          //给播放按钮图片添加事件          this.vimg.addEventListener('tap',function(){              that.video.play();          })      }</code></pre>    <p>tap事件，是MUI封装好的一个适合移动端点击的事件哦，移动端click事件延迟300ms，建议大家多用tap，关于tap事件是如何模拟的，请看 <a href="/misc/goto?guid=4959676823232347772" rel="nofollow,noindex">HTML5触摸事件演化tap事件介绍</a></p>    <p>哟西，视频开始播放拉！！！</p>    <p><img src="https://simg.open-open.com/show/179af8d5a8cbe167685197265bf57661.png"></p>    <p>回顾一下 <a href="/misc/goto?guid=4959676823075637827" rel="nofollow,noindex">H5打造属于自己的视频播放器（逻辑篇）</a></p>    <p>温习一下 <a href="/misc/goto?guid=4959676823350459655" rel="nofollow,noindex">移动端HTML5<video>视频播放优化实践</a></p>    <h2>初始化</h2>    <p>1）封面 在这里我没啥好图，就不设置了，大家可以试试在video标签加入属性 preload="图片地址"</p>    <p>2）获取视频长度，ok，我们给视频添加一个" <strong>loadedmetadata</strong> "获取到元数据事件，什么事元数据？</p>    <p>举个栗子：一部电影30个G，名字叫《我将带头冲锋》，视频长300小时</p>    <p>大小，名称，长度，等这些应该就算是元数据了。</p>    <p>我们给视频添加一个获取到元数据事件</p>    <pre>  <code class="language-javascript">pro.initEvent = function(){          var that = this;          //给播放按钮图片添加事件          this.vimg.addEventListener('tap',function(){              this.style.display = 'none';              that.video.play();          })                    //获取到元数据          this.video.addEventListener('loadedmetadata',function(){              that.vC.querySelector('.duration').innerHTML = this.duration;          });      }</code></pre>    <p><img src="https://simg.open-open.com/show/29b764981fca2921bbd04e038447ca94.png"></p>    <p>果然出现了视频的长度，可是这是按秒计算的啊。。。</p>    <p>这时我们可以写一个时间转换的函数</p>    <pre>  <code class="language-javascript">function stom(t) {          var m = Math.floor(t / 60);          m < 10 && (m = '0' + m);          return m + ":" + (t % 60 / 100).toFixed(2).slice(-2);      }</code></pre>    <p>转换一下</p>    <p><img src="https://simg.open-open.com/show/4e857f58ac0238747db80da9a15ac084.png"></p>    <p>可以，这很清真，今天我们暂时讲到这，消化消息，也让楼主整顿一下思绪</p>    <p>本章节JS1源码放在 <a href="/misc/goto?guid=4959676823466328105" rel="nofollow,noindex">这里</a></p>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000006569543</p>    <p> </p>    <p><span style="background:rgb(189, 8, 28) url("data:image/svg+xml; border-radius:2px; border:medium none; color:rgb(255, 255, 255); cursor:pointer; display:none; font:bold 11px/20px "Helvetica Neue",Helvetica,sans-serif; left:30px; opacity:0.85; padding:0px 4px 0px 0px; position:absolute; text-align:center; text-indent:20px; top:4295px; width:auto; z-index:8675309">Save</span></p>    <p> </p>