嵌入视频
Html5 支持直接在浏览器中播放音频和视频文件,不需要使用adobe flash插件
插件是令浏览器崩溃的主要原因之一,特别是Flash,存在着很多问题。
浏览器中常见支持的视频格式为 Ogg,MPEG4,WebM
针对不同浏览器的不同版本,支持的视频格式会存在些许的差异。
IE支持性能较差,Google Chrome支持兼容性较强。
解决:针对不同浏览器,设置不同的影音格式。
video元素
<video > </video>
网页里嵌入视频内容
属性:
- Src: 视频的来源
- Height 高度
- Width: 宽度
- Autoplay : 自动播放 -无属性值
- Preload 预先加载视频
(Preload属性值: None-不会载入,Metadata-只载入第一帧,Auto-请求下载整个视频,浏览器可以忽略,不进行设置默认为Auto ) - Controls 控制栏(浏览器自带的播放,进度条等) -无属性值
- Loop 视频循环播放 -无属性值
- Poster 视频载入时显示图片(设置未开始播放视频时显示的图片)
- Muted 视频静音 -无属性值
<!DOCTYPE html>
<html>
<head>
<meata charset="UTF-8" />
<title>MelanceXin Video_Test</title>
</head>
<body>
<video src="abc.mp4"></video>
<video src="abc.mp4" heiht="500px"></video>
<!-- 设置高度为500px -->
<video src="abc.mp4" heiht="500px" Autoplay></video>
<!-- 自动播放 -->
<video src="abc.mp4" heiht="500px" Controls></video>
<!-- 视频窗口控制栏 -->
<video src="abc.mp4" heiht="500px" Controls Preload="None"></video>
<!-- 视频不预先加载 -->
<video src="abc.mp4" heiht="500px" Controls Preload="Metadata"></video>
<!-- 只载入第一帧 -->
<video src="abc.mp4" heiht="500px" Controls Preload="Metadata" Poster="image.jpg"></video>
<!-- 第一帧显示指定图片 -->
<!-- 如果video标签中src属性的url播放不了,依次在source中寻找能播放的视频格式 -->
<video src="abc.mp4" heiht="500px" Controls Preload="Metadata" Poster="image.jpg">
<source src="abc.mp4" type ="video/mp4">
<source src="abc1.ogg" type ="video/ogg">
</video>
</body>
</html>
注意:针对不同浏览器可能会存在支持的视频格式不同,这儿可以设置多种视频格式,进行如下操作
<video src="abc.mp4" heiht="500px" Controls Preload="Metadata" Poster="image.jpg">
<source src="abc.mp4" type ="video/mp4">
<source src="abc1.ogg" type ="video/ogg">
</video>
嵌入音频
html嵌入音频同嵌入视频大体类似
常见的浏览器支持的音频文件格式: ogg vorbid ,MP3 ,WAV
标签:
属性:
- Autoplay 自动播放音频 -无属性值
- Loop 循环播放 -无属性值
- Controls 显示空间面板 -无属性值
- Preload 预先加载音频文件
- Src 播放音频的来源(URL)
实例:
<audio src="../123.mp3" autoplay loop preload>
<source src="123.ogg" type="audio/ogg">
</adudio>