嵌入视频

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>

HTML5-嵌入视频和音频

嵌入视频

video元素

嵌入音频

猜你喜欢