欢迎来到CClarence的博客!!

敲代码真的是一件令人感到上瘾的事情,在我二十多年的生活中,除了打DoTa,好像没有其他的另一件事也能让我如此乐此不疲。而前端恰恰是编程与界面的最前沿,它能让快速的让你感受到自己的成果,这是一件多么令人兴奋的事啊!!我希望在两年后我毕业的时候我能真的成为一位前端码农,在五年后我能成为一位NB的前端码农!!
----------CClarence写于2015年入冬。

001

createVideoControls与addControls函数

function createVideoControls() {
  var vids = document.getElementsByTagName('video');
  for (var i = 0 ; i < vids.length ; i++) {
    addControls( vids[i] );
  }
}

function addControls( vid ) {

  vid.removeAttribute('controls');


  vid.height = vid.videoHeight;
  vid.width = vid.videoWidth;
  vid.parentNode.style.height = vid.videoHeight + 'px';
  vid.parentNode.style.width = vid.videoWidth + 'px';

  var controls = document.createElement('div');
  controls.setAttribute('class','controls');
    
  var play = document.createElement('button');
  play.setAttribute('title','Play');
  play.innerHTML = '&#x25BA;';
   
  controls.appendChild(play);
 
  vid.parentNode.insertBefore(controls, vid);
  
  play.onclick = function () {
    if (vid.ended) {
      vid.currentTime = 0;
    }
    if (vid.paused) {
      vid.play();
    } else {
      vid.pause();
    }
  };  
  
  vid.addEventListener('play', function () {
    play.innerHTML = '&#x2590;&#x2590;';
    play.setAttribute('paused', true);
  }, false);
  
  vid.addEventListener('pause', function () {
    play.removeAttribute('paused');
    play.innerHTML = '&#x25BA;';
  }, false);
  
  vid.addEventListener('ended', function () {
    vid.pause();
  }, false);
}
addLoadEvent(createVideoControls);
addLoadEvent(addControls);

自定义视频插件

posted @ 2015-10-27 22:41  CClarence  阅读(340)  评论(0编辑  收藏  举报