HTML5 Audio/Video 标签,属性,方法,事件-优快云博客

本文链接：https://blog.youkuaiyun.com/wjlgryx/article/details/83917548

本文深入解析HTML5中的<audio>和<video>标签的使用方法，包括关键属性如src、preload、autoplay等，并演示如何通过JavaScript获取并操作这些元素。

本文转自：http://directguo.com/blog/index.php/2010/07/html5-audio-video-tag/

<audio> 标签属性：

src：音乐的URL
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条

 
   1 <audio id="media" src="http://www.abc.com/test.mp3" controls></audio>

<video> 标签属性：

src：视频的URL
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度

 
   1 <video id="media" src="http://www.abc.com/test.mp4" controls width="400px"heigt="400px"></video>

获取HTMLVideoElement和HTMLAudioElement对象

 
   1//audio可以直接通过new创建对象

   2 Media = new Audio("http://www.abc.com/test.mp3"); 

   3//audio和video都可以通过标签获取对象

   4 Media = document.getElementById("media");

Media方法和属性：

HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement

 
   01//错误状态