如何在網頁中播放一個視訊?
阿新 • • 發佈:2020-07-24
最簡單的在網頁中播放一個視訊,就是直接採用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