HTML5（智能提示和视频音频标签）

简介 ---------------------------------------------------------------------------------------------------------

我这里简单写一些，大家最好是 在网上找一些看看，本节主要是界面VIdeo和Audio标签

View Code

安装智能提示 -----------------------------------------------------------------------------------------------------------

智能提示是不能少的，对于大多数程序员来说这是很好的工具，大家参考一下吧

下载 地址：http://visualstudiogallery.msdn.microsoft.com/d771cbc8-d60a-40b0-a1d8-f19fc393127d

下载完成后直接安装就行了，

然后对你的Vs2008/2010设置一下

工具---选项---文本编辑--HTml--验证，如下图片

然后就可以在输入时有提示了，这个就不演示了，因为这对于程序员来说是常识。呵呵

咱们先一起来看一下video标签吧，在我们开始之前先来看看都有那些浏览器支持它吧

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

格式IEFirefoxOperaChromeSafari
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

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

一起来看看它都有那些属性吧

属性值描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload preload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels

设置视频播放器的宽度。

下面咱们一起来看一个例子

复制代码
<!DOCTYPE HTML>
<html>
<body>
    <video   controls="controls" width="500" height="500">
        <source src="video/123.mp4" type="video/mp4" />
        当浏览器不支持此标签时显示我
    </video>
</body>
</html>
复制代码

如果在Google浏览器上打开如下：

效果是不是很拉风啊

这样我们自己的电脑就不需要安装视频插件了，也不需要启动本机的视频播放器。

如果我们想实现这样的显示，当页面加载完成后，循环自动播放一个视频应该怎么做呢？

看下面的代码

复制代码
<!DOCTYPE HTML>
<html>
<body>
    <video  autoplay="autoplay" loop="loop" controls="controls" width="500" height="500">
        <source src="video/123.mp4" type="video/mp4" />
        当浏览器不支持此标签时显示我
    </video>
</body>
</html>
复制代码


我们只是加了两个属性（autoplay="autoplay" loop="loop"），这样就会自动播放了，如果再把controls="controls"去掉的话，用户就不能手动关闭视频，只有关闭网页时才能关闭视频，

要不然就会一直重复的播放，这种显示其实很常用，比如广告和背景音乐。

我为什么把audio和Video放一起呢，那是因为他们两个的差别极下，看Audio的属性就明白了

属性值描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
preload preload

如果出现该属性，则音频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。

 

它只是比Video少了两个属性一个是高一个是长。

如果要设置背景音乐就可以这样做了。

    <audio autoplay="autoplay" loop="loop" controls="controls">
        <source src="video/1.mp3" type="audio/mpeg">
    </audio>
posted @ 2015-12-18 16:24  Ievery  阅读(246)  评论(0)    收藏  举报