html5 多媒体组件

<pre name="code" class="javascript">

<style>#progressBar {    border:1px solid #aaa; color:#fff;    width:295px; height:20px;  } #progress {    background-color:#000;  height:20px;    display:inline-block;  } </style>

<video id="video" controls>    <source src="/i/movie.ogg" type="video/ogg">  <source src="/i/movie.mp4" type="video/mp4"> </video> <button onclick="ppause()" title="pause" id="pause">开始</button><input id="range" min="0" max="1" step="0.1" type="range" onchange="rangeb()"/><button id="mute" onclick="mute()">Mute静音</button> <div id="progressBar">  <span id="progress"></span></div>

<script type="text/javascript">video.addEventListener("timeupdate", progressd, false);function mute(){     video.muted = !video.muted;}function rangeb(){       var volume = document.getElementById("range");       video.volume = volume.value;}function ppause(){   var btn=document.getElementById("pause");   if(video.paused || video.ended){       btn.title = "暂停";       btn.innerHTML = "暂停";       video.play();   }else{       btn.title = "开始";      btn.innerHTML = "开始";      video.pause();   }}

//监听

<pre name="code" class="html"><pre name="code" class="javascript">video.addEventListener('play', function() {   var playpause = document.getElementById("pause");   playpause.title = "pause";   playpause.innerHTML = "pause"; }, false);  video.addEventListener('pause', function() {   var playpause = document.getElementById("pause");   playpause.title = "play";   playpause.innerHTML = "play"; }, false);

function progressd(){ var pro = document.getElementById("progress"); if( video.currentTime > 0 ){ var value = Math.floor((video.currentTime/video.duration)*100);//当前的播放位置/视频总长度 pro.style.width = value + "%"; }}</script>