Viedo标签在IE9下的效果

最新推荐文章于 2021-08-27 15:06:30 发布

O溺水的鱼0

最新推荐文章于 2021-08-27 15:06:30 发布

阅读量4.8k

点赞数

分类专栏：前端技术文章标签： ie function video html5 javascript html

本文链接：https://blog.csdn.net/wgw335363240/article/details/5955334

版权

前端技术专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前段时间微软发布了IE9，IE9已经支持HTML5和css3等一些特性，今天抽时间研究了下HTML5的标签video在IE9下的效果，自己编写了一个静态文件，在IE9打开即可直接播放指定的音频文件。

viedo标签可以使我们像img指定图片那样播放音频文件，如下边的代码：

开始的时候，把Video的子标签source的src属性指定了中文路径，导致不能正确播放音频文件，下边是可以正确播放的html代码。需要再d盘根目录存放sing.mp3和test.mp3。

一、完整的html代码

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> 音频 </TITLE>
<SCRIPT LANGUAGE="JavaScript">
window.οnlοad=function(){
  //获取相应的DOM对象
  var video = document.getElementById('video');
  var togglePlay = document.getElementById('play');
  var position = document.getElementById('position');
  var ready = false;
  //注册视频对象事件
  video.addEventListener('timeupdate', function () {position.innerHTML = asTime(this.currentTime);}, true);
  video.addEventListener('ended', function (){togglePlay.value = "play";}, true);
  video.addEventListener('canplay', function () {
   ready = true;
   var durTime = asTime(this.duration);
   document.getElementById('duration').innerHTML = durTime;
  }, true);

  function asTime(t) {
   t = Math.round(t);
   var s = t % 60;
   var m = Math.round(t / 60);
   return two(m) + ':' + two(s);
  }
  function two(s) {
   s += "";
   if (s.length < 2) s = "0" + s;
   return s;
   }
  //注册播放按钮事件
  togglePlay.addEventListener('click', function () {
    if (ready) {
     video.playbackRate = 0.5;
     if (video.paused) {
      if (video.ended) {
      video.currentTime = 0;
      }
      video.play();
      this.value = "pause";
     } else {
      video.pause();
     this.value = "play";
     }
    }
   }, true
  );
}

</SCRIPT>
</HEAD>
<BODY>
<video id="video">
   <source src="D:/sing.mp3" mce_src="sing1.mp3" />
   <source src="D:/test.mp3" mce_src="test.mp3" />
</video>
<p id="controls">
  <input type="button" id="play" value="play"> <span id="position">00:00</span> / <span id="duration">loading...</span>
</p>

</BODY>
</HTML>