zoukankan      html  css  js  c++  java
  • video标签

    video

    通过video标签,我们可以抛弃最近不怎么讨好的Flash,直接在页面中播放视频文件。视频文件自然是最符合语义化的文件格式,但该元素标签同样支持音频与图片。

    过去(及目前),我们通常要使用类似下面这样繁冗丑陋的代码来将视频放置在页面中,但这种方式要求浏览器安装有Flash插件,并支持JavaScript:

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
    <param name="allowFullScreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
    <param name="allowfullscreen" value="true" />
    <embed type="application/x-shockwave-flash" width="425" height="344"  src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
    </embed>
    </object>
    

    HTML5的方式:

    <video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer>
    <p>
    Try this page in Safari  4! Or you can
    <a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a>
    instead.
    </p>
    </video>
    

    video标签有如下几个常用属性:

    Autoplay: 用来设定视频是否在页面加载后自动播放。
    Src: 为视频指定文件链接或下载路径,当浏览器不支持video标签或发生某种播放错误时,可以提供给用户进行下载。
    Autobuffer: 用来设定视频是否自动缓冲;如果设定,那么页面加载之后,视频会自动下载缓冲,当用户点击播放按钮后,至少已经有一部分视频可以直接观看而无需等待了。
    Poster: 用来为视频设置一个“相框默认图片”性质的背景图片;当视频无法正常加载播放时可以向用户呈现。
    Controls: 用来设置是否为视频添加控制条,例如“播放”、“暂停”等;控制条的外观可以自定义。
    Loop: 用来设置视频是否循环播放。
    Width , Height: 用来控制视频的宽度与高度。
    虽然video元素备受关注且大有潜力,不过距离被主流浏览器全面支持仍有待时日;目前,如果一定有必要使用video标签,我们可以使用类似如下不伦不类的代码组合方式:

    <video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png">
    <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
    <param value="http://www.youtube.com/demo/google_main.mp4">
    <param value="true">
    <param value="false">
    <embed src="http://www.youtube.com/demo/google_main.mp4" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
    </embed>
    </object>
    </video>
    

    HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output

    HTML video 标签

    HO8001: 各浏览器下使用 OBJECT 元素和 EMBED 元素嵌入 Flash 存在差异

  • 相关阅读:
    哲理故事
    ajaxToolkit发布之后出错!说未能加载文件或程序集!
    一个沉重的教训!!!
    ValidatorCallout真的是太酷了!
    GridView放在UpdatePanle里面模板列取值!
    Prototype学习笔记之-Ajax.Request
    数据分类重排!
    SQL SERVER 2005 sa登录失败!
    flex应该学到什么程度
    jquery dataTable的学习
  • 原文地址:https://www.cnblogs.com/masai1969/p/4355527.html
Copyright © 2011-2022 走看看