html5中video的属性方法

HTML5 <video> 元素的属性与方法

HTML5 的 <video> 元素为网页中的视频播放提供了强大的支持。通过一系列属性和方法，开发者可以灵活地控制视频的播放行为、外观以及用户交互。以下是一些常用的 <video> 属性与方法的详细介绍：

常用属性

1. src

   • 描述: 指定视频文件的 URL。
   • 示例: <video src="movie.mp4"></video>

2. controls

   • 描述: 显示默认的视频控制器（播放/暂停按钮、音量调节等）。
   • 示例: <video src="movie.mp4" controls></video>

3. autoplay

   • 描述: 页面加载后自动播放视频。
   • 注意: 在某些浏览器中，可能需要静音才能自动播放。
   • 示例: <video src="movie.mp4" autoplay></video>

4. loop

   • 描述: 视频播放结束后重新开始播放。
   • 示例: <video src="movie.mp4" loop></video>

5. muted

   • 描述: 默认静音播放视频。
   • 示例: <video src="movie.mp4" muted></video>

6. poster

   • 描述: 指定在视频下载或未播放时显示的图像。
   • 示例: <video src="movie.mp4" poster="poster.jpg"></video>

7. preload

   • 描述: 设置页面加载时是否预加载视频数据。可选值有 auto（默认）、metadata（仅预加载元数据）和 none（不预加载）。
   • 示例: <video src="movie.mp4" preload="auto"></video>

8. width 和 height

   • 描述: 设置视频播放器的宽度和高度。
   • 示例: <video src="movie.mp4" width="640" height="360"></video>

9. multiple sources (source elements)

   • 描述: 使用多个 <source> 子元素指定不同格式的视频文件，以便浏览器选择支持的格式播放。
   • 示例:<video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

常用方法

1. play()

   • 描述: 开始播放视频。
   • 示例: var video = document.querySelector('video'); video.play();

2. pause()

   • 描述: 暂停当前播放的视频。
   • 示例: var video = document.querySelector('video'); video.pause();

3. load()

   • 描述: 重新加载视频资源。
   • 示例: var video = document.querySelector('video'); video.load();

4. canPlayType(type)

   • 描述: 检查浏览器是否能播放特定类型的视频文件。返回值为 'probably' 或 'maybe' 表示可能支持，'' 表示不支持。
   • 参数: type 为 MIME 类型字符串，如 "video/mp4"。
   • 示例: console.log(document.querySelector('video').canPlayType("video/mp4"));

常用事件

虽然这些不是直接的方法，但处理视频相关的事件对于实现复杂的交互非常有用。

1. play

   • 描述: 当视频开始播放时触发。
   • 示例: video.addEventListener('play', function() { console.log('Video is playing!'); });

2. pause

   • 描述: 当视频暂停时触发。
   • 示例: video.addEventListener('pause', function() { console.log('Video is paused!'); });

3. ended

   • 描述: 当视频播放结束时触发。
   • 示例: video.addEventListener('ended', function() { console.log('Video has ended!'); });

4. loadeddata

   • 描述: 当媒体数据的首帧已加载并就绪时触发。
   • 示例: video.addEventListener('loadeddata', function() { console.log('Data loaded!'); });

通过结合使用这些属性和方法，开发者可以在网页中创建功能丰富且用户体验良好的视频播放功能。