码迷,mamicode.com
首页 > 其他好文 > 详细

createVideoControls与addControls函数

时间:2015-10-27 23:30:27      阅读:409      评论:0      收藏:0      [点我收藏+]

标签:

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);

自定义视频插件

createVideoControls与addControls函数

标签:

原文地址:http://www.cnblogs.com/CClarence/p/4915864.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!