wudymand

如何在网页中播放一个视频?

最简单的在网页中播放一个视频,就是直接采用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


 

分类:

技术点:

相关文章:

  • 2021-08-17
  • 2021-10-31
  • 2021-11-25
  • 2021-08-14
  • 2021-12-01
  • 2021-11-27
  • 2021-09-11
  • 2022-12-23
猜你喜欢
  • 2021-08-07
  • 2021-10-28
  • 2021-10-27
  • 2022-01-26
  • 2022-12-23
  • 2021-11-20
相关资源
相似解决方案