HTML5 Video 组件详解：添加、控制及代码示例

直接在页面上添加一个 video 组件：

<video id='myvideo' controls='controls' width='320' height='240' autoplay='autoplay' loop='0'>
  <source src='movie.ogg' type='video/ogg'>
  <source src='movie.mp4' type='video/mp4'>
  抱歉，你的浏览器不支持 video 组件
</video>

增加控制按钮：

<div class='video_example'>
  <div class='btn_ctrl'>
    <button onClick='playPause()'>播放/暂停</button>
    <button onClick='makeBig()'>大</button>
    <button onClick='makeSmall()'>小</button>
  </div>
  <div class='mov_area'>
    <video id='video1' width='420'>
      <source src='movie.ogg' type='video/ogg'>
      <source src='movie.mp4' type='video/mp4'>
      抱歉，你的浏览器不支持 video 组件
    </video>
  </div>
</div>
<script type='text/javascript'>
var myVideo = document.getElementById('video1');
function playPause() {
  if (myVideo.paused)
    myVideo.play();
  else
    myVideo.pause();
}
function makeBig() {
  myVideo.width = 580;
}
function makeSmall() {
  myVideo.width = 320;
}
</script>

Video 组件方法、属性及事件

方法	属性	事件
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

网页加载视频，代码并截图

以下展示了如何在网页中加载视频，并使用 JavaScript 代码控制其播放和大小。

<video id='myvideo' controls='controls' width='320' height='240' autoplay='autoplay' loop='0'>
  <source src='movie.ogg' type='video/ogg'>
  <source src='movie.mp4' type='video/mp4'>
  抱歉，你的浏览器不支持 video 组件
</video>

在这个代码示例中，我们创建了一个 <video> 元素，并设置了必要的属性，包括：

id：为 video 元素指定一个唯一的标识符。
controls：显示默认的播放控制按钮。
width：设置视频的宽度。
height：设置视频的高度。
autoplay：自动播放视频。
loop：循环播放视频。

然后，我们使用 <source> 元素指定了视频的源文件，并设置了视频类型。如果浏览器不支持 video 元素，就会显示 '抱歉，你的浏览器不支持 video 组件' 的提示信息。

请注意，以上代码示例仅展示了基本的 video 组件使用方式，你可以根据需要添加更多属性和事件来实现更复杂的视频播放控制功能。