如何在網頁中播放一個視頻?


最簡單的在網頁中播放一個視頻,就是直接采用html5 的video 標簽,例如普通一個普通的mp4格式的視頻,html頁面如下,采用video 標簽,視頻源是當前目錄下的test.mp4:

<html>
<head>
</head>
<body>
<video id="video1" src="test.mp4" controls=true type="video/mp4"></video>
</body>
</html>

點擊播放http://www.danongling.com/work_test/streaming/basic_mp4/player1.html

也可以寫成另外的方式,通過函數去控制播放,定義了一個按鈕,點擊start play,即會調用playVideo函數,去播放:
<html>
<head>
<script>
var video;
function init()
{
    video=document.getElementById('video');
}
function playVideo()
{
    video.play();
}
</script>
</head>
<body onload='init();'>
<div>
<input onclick='playVideo();' type='button' value='start play'>
</div>
<video id="video" width="320" height="180" autoplay="autoplay" controls="controls">
    <source src="test.mp4" type="video/mp4"">
	</video>
</body>
</html>

點此打開播放頁面http://www.danongling.com/work_test/streaming/basic_mp4/player2.html

以下是添加一些video標簽的事件檢控,當video 開始load的時候,就會alert一個對話框提示信息:
<html>
<head>
</head>
<body>
<video id="video1" src="test.mp4" controls=true type="video/mp4"></video>
<script>
myVid=document.getElementById("video1");

myVid.addEventListener("loadeddata", function()
  {
  alert("Browser has loaded the current frame");
  }
);

myVid.addEventListener("loadstart", function()
  {
  alert("Starting to load video");
  }
);

//removeEventListener
</script>
</body>
</html>

點此打開播放頁面http://www.danongling.com/work_test/streaming/basic_mp4/player3.html

 
        
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM