网页中播放视频代码(视频播放网站源代码)

　　今天李书记将带大家做几个有意思的标签，那就是写一些媒体标签，通过一些html5技术做的视频音频标签可以在网页中加载更多的视频和音频标签包括flash动画等等。希望大家认真学习哈，另外html5入门我总共总结4课，这4节课贯穿html5所有比较实用的标签。

　　html5入门技术

　　audio 音频标签：

　　作用:在页面中引入音频内容。

　　<!–基本的音频格式–>

　　<audio src=”_WStyle.mp3″ controls>后备内容</audio>

　　<!–完整格式的音频–>

　　<audio controls>

　　对不起，您的破浏览器不支持音频标签，请升级浏览器

　　<source src=”_WStyle.mp3″ type=”audio/mp3″ />

　　<source src=”_WStyle.ogg” type=”audio/ogg” />

　　<source src=”_WStyle.wav” type=”audio/wav” />

　　</audio>

　　属性：

　　src 在音频标签中用于引入音频的地址。如果使用多个音频资源，则需要在source标签中引入音频地址，audio中不使用该属性。

　　controls 设置播放的控制面板。单属性

　　Autoplay 设置音频为自动播放 单属性

　　loop 设置音频为循环播放。

　　Preload 设置音频为预先加载属性。在音频未开始播放之前就先下载内容。

　　none 不预先加载

　　auto 自动加载。

　　注意：该属性和autoplay有冲突，不能同时使用

　　各个浏览器对于音频编码的支持。

　　IE浏览器 MP3和WAV的编码格式

　　FF浏览器 ogg和WAV的编码格式

　　Opera浏览器 ogg和WAV的编码格式

　　chrome浏览器 ogg和MP3及vp8格式

　　safari浏览器 ogg和MP3及vp8格式

　　video 视频标签：

　　作用：在网页中播放视频文件。

　　<!–简单的视频格式–>

　　<video src=”制作宇宙中的地球_超清.mp4″ controls>又是这个破浏览器赶紧换了~</video>

　　<!–完整的视频格式–>

　　<video controls>

　　又是这个破浏览器赶紧换了~

　　<source src=”制作宇宙中的地球_超清.mp4″ type=”video/mp4″>

　　<source src=”制作宇宙中的地球_超清.ogg” type=”video/ogg”>

　　</video>

　　视频标签的属性：

　　src 引入视频地址，video和source同时使用时，不需要使用该属性

　　controls 显示控制面板属性 单属性

　　Autoplay 自动播放属性 单属性

　　loop 设置为循环播放 单属性

　　width 设置视频的宽度

　　height 设置视频的高度

　　poster 设置视频的预览图片

　　preload 设置预先加载属性

　　auto 自动加载

　　none 不自动加载(默认)

　　浏览器对视频编码的支持。

　　IE浏览器 支持H.264和VP8编码格式。

　　FF浏览器 支持ogg和VP8编码格式

　　Opera浏览器 支持ogg和VP8编码格式

　　chrome浏览器 支持ogg和VP8，H.264编码格式

　　safari浏览器 支持ogg和VP8,H.264编码格式

　　source 音视频资源标签

　　作用：用于引入音频或者视频

　　格式:<source src=”地址” type=”音视频类型的MIME”>

　　canvas 画布标签

　　关于canvas画布标签我会在后面的课程中总结中单独花几天时间讲下，这个比较复杂。

　　embed 多媒体标签

　　一般用于引入页面中的flash文件

　　<!–引入falsh文件–>

　　<embed src=”旋转的文字.swf”>

　　meter 状态条标签

　　max 设置最大状态值

　　min 设置最小状态值

　　value 设置当前值

　　high 设置高警告值

　　low 设置低警告值

　　optimum 设置良好值

　　规则：

　　如果optimum值比low的值还低，则表示值越低状态越好(绿色) 中间和高值则为黄色和红色

　　如果optimum值处于high值和low值之间，则表示中间状态良好(绿色)，低值和高值为黄色

　　如果optimum值比high值还高，则表示值越高越好(绿色)，中间值和低值为黄色和红色

　　progress 进度条标签

　　作用:表示一个事物的进度。

　　max 设置最大进度值。

　　value 设置当前进度只

　　格式：

　　<!–进度条–>

　　<progress max=”100″ value=”0″>破浏览器！</progress>

　　Mark 高亮标记标签

　　作用：将该标签内部的文字变为具有黄色背景效果的文字，用于提示读者注意该内容。

　　注意：可以修改CSS样式。。。

　　time 时间标签

　　作用：对时间进行一个解释，方便搜索引擎收录。

　　datetime属性

　　格式：

　　datetime=”2012-12-12T20:30:28″ 当前时间

　　datetime=”2012-12-13T20:30:28Z UTC时间格式

　　datetime=”2012-12-14T20:30:28+08:00 指定时区格式

　　pubdate 属性

　　设定当前的时间为一个内容发布的时间。

　　ruby 拼音注释标签

　　作用：给文字加拼音注释

　　格式：

　　<ruby>文字<rt>拼音</rt></ruby>

　　details 细节描述标签

　　summary 细节描述标签的标题标签

　　今天我们主要讲解html5入门课程的第二节，关于除了页面布局其他标签的使用方法，如果大家对html5不是太熟悉请将HTML5入门教程(1)好好学习下，代码敲十遍，在学习这节课的内容。