HTML5_1 页面视频、音频播放

最新推荐文章于 2023-09-22 09:33:11 发布

kissoday

最新推荐文章于 2023-09-22 09:33:11 发布

阅读量981

点赞数 2

分类专栏： HTML5 文章标签： HTML5 视频

本文链接：https://blog.csdn.net/kissoday/article/details/45127413

版权

HTML5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一般网页上的视频都是用Filsh实现的

Flash的使用还是比较有局限性的

如果作者不具备Flash知识

就不容易把视频放在网页中

HTML5中规定了视频标签“Video”

Video标签是HTML5定制好标准的标签

它具备各种开发用的方法和属性

使开发人员能非常容易的掌握

废话不多说

正式进入 HTML5的Video标签

-----------------------------------------------------------

视频格式

当前，video 元素支持三种视频格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

实例

<video width="320" height="240" controls="controls">
  <source src="video/大话西游.ogg" type="video/ogg">
  您的浏览器不支持HTML5的Video标签
</video>

由上例可看出ideo标签的组成

Video标签属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

Video标签中的Source标签

video 元素允许多个 source 元素

source 元素可以链接不同的视频文件

浏览器将使用第一个可识别的格式。

请注意，这里说的是无论video标签中有多少个视频文件地址

浏览器只会播放他所能识别的第一个视频文件

Video标签中说明文字

如果video中的视频文件都不能被浏览器识别

浏览器将会显示video标签中的说明文字

说明文字与Source标签的顺序没有关系

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

Video标签使用完整实例

<!DOCTYPE html> 
<html> 
<body> 

<div style="text-align:center;">
  <button οnclick="playPause()">播放/暂停</button> 
  <button οnclick="makeBig()">大</button>
  <button οnclick="makeNormal()">中</button>
  <button οnclick="makeSmall()">小</button>
  <button οnclick="playLoad()">重新加载</button>
  <video id="video1" width="420" style="margin-top:15px;">
    <source src="video/demo.mp4" type="video/mp4" />
    <source src="video/demo.ogg" type="video/ogg" />
    您的浏览器不支持HTML5视频播放
  </video>
</div> 

<script type="text/javascript">
var myVideo=document.getElementById("video1");

/* 重新加载一个视频文件 */
/* 使用这个方法可以做个播放列表啦 */
function playLoad() {
myVideo.src="video/test.ogg";
myVideo.type="video/ogg";
myVideo.load();
}

/* 播放/暂停功能 */
function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 

/* 改变视频的大小 */
function makeBig()
{ 
myVideo.width=560; 
} 

function makeSmall()
{ 
myVideo.width=320; 
} 

function makeNormal()
{ 
myVideo.width=420; 
} 

</script> 

</body> 
</html>

HTML5音频文件

音频格式

当前，audio 元素支持三种音频格式：

	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

实例

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  您的浏览器不支持HTML5音频播放
</audio>

为什么要把视频和音频一起说呢。

以为他们的属性，事件，方法几乎都一样。

参照上面的视频例子

就可以播放音频了

在这里就不赘述了。

PS:本文中部分数据来源W3SCHOOL。

kissoday

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录