zoukankan      html  css  js  c++  java
  • HTML5学习笔记第一节(智能提示和视频音频标签)

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

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

    View Code
    HTML5 是下一代的 HTML。  
    什么是 HTML5?
    HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
    HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。
    HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
    HTML5 是如何起步的?
    HTML5 是 W3C 与 WHATWG 合作的结果。
    编者注:W3C 指 World Wide Web Consortium,万维网联盟。 编者注:WHATWG 指 Web Hypertext Application Technology Working Group。
    WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。
    为 HTML5 建立的一些规则: •新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 •减少对外部插件的需求(比如 Flash) •更优秀的错误处理 •更多取代脚本的标记 •HTML5 应该独立于设备 •开发进程应对公众透明
    新特性
    HTML5 中的一些有趣的新特性: •用于绘画的 canvas 元素 •用于媒介回放的 video 和 audio 元素 •对本地离线存储的更好的支持 •新的特殊内容元素,比如 article、footer、header、nav、section •新的表单控件,比如 calendar、date、time、email、url、search
    浏览器支持
    最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

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

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

    下载 地址: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>


     好了,就到这里吧,很简单,其实HTMl更多的是标准,把我们经常用的一个插件使用标签来代替

    本人的博客不再维护从2013年就不再维护了 需要我帮助的朋友请到我的个人论坛 http://www.sufeinet.com 进行讨论,感谢大家对我的支持!
  • 相关阅读:
    2021年下半年北京市中小学教师资格考试笔试报名公告
    高效演讲
    php的Allowed memory size of 134217728 bytes exhausted问题解决办法
    1111error
    http 500 错误
    xshell连接centons
    Vue 计算属性
    Vue 自定义指令
    Vue 事件绑定
    Vue v-cloak指令解决插值表达式“闪动”问题
  • 原文地址:https://www.cnblogs.com/sufei/p/2263312.html
Copyright © 2011-2022 走看看