当前位置: 代码迷 >> HTML/CSS >> HTML5对视频播发Video元素的控制
  详细解决方案

HTML5对视频播发Video元素的控制

热度:169   发布时间:2012-07-01 13:15:00.0
HTML5对视频播放Video元素的控制
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">

 function playPause() {

        var myVideo = document.getElementById("video1");

       if (myVideo.paused)

           myVideo.play();

       else

           myVideo.pause();
       }
  function Stop()
  {
	 var  myVideo = document.getElementById("video1");
	 myVideo.currentTime=0;
	 myVideo.pause();
  }
  
  function  gotoTime()
  {
	  var myVideo = document.getElementById("video1");
 	  var time  = document.getElementById("time").value;
	  if(time=="")
	  {
		  alert("请输入一个时间");
	  }
	  else
	  {
	    myVideo.currentTime = time;
        myVideo.pause();
	  }
  }
	   
</script>
</head>
<body>
 HTML5可支持视频格式:mp4、flv、swf、webm、ogg</br>
<video width="320" height="240" controls="controls" name="video" id = "video1">
  <source src=".\video\1.mp4" type="video/mp4">
你的浏览器不支持HTML5播放视频功能
</video>
 
</br>
时间:<input type ="number" name="time" id="time"  value=""/></br>
 <input type="button" name="change" value="跳转" onClick="gotoTime();"/></br>
 <input type="button" name="start" value="播放/暂停"  onClick="playPause();"/></br>
 <input type="button" name="stop" value="停止" onClick="Stop();"/>
</body>
</html>