• html5 video(html中播放视频的标签)


    在html5中,“视频”标签<video>定义视频,比方电影片段或其他视频流。
    HTML5是近十年来Web标准最巨大的腾跃。HTML5并非只是用来表明Web内容,它也将Web带入一个老练的使用平台,在这个平台上,视频,音频,动画,以及同电脑的交互都被标准化。跟着HTML5的发展,各个浏览器都现已或即将支撑HTML5。在大潮流的推进下,微软也表明将把HTML5作为IE9的核心,并将全力投入HTML5。html5video
    许多平常最喜欢上网看视频、玩游戏的朋友常常抱怨不爽,由于网上很多视频和游戏都需求装置Flash插件,而且速度也跟不上!HTML5的出现解决了这一难题。HTML5提供了音频视频的标准接口,实现了无需任何插件支撑,只需浏览器支撑相应的HTML5标签。怪不得都说HTML5是Flash的终结者!Safari5、Firefox4和Chrome6等浏览器加入了HTML5技能,能够免除Flash插件的装置直接播放视频!

    html中播放视频的标签

    1,下面是一个播映视频的最简单样例
    (controls特点告知浏览器要有根本播映控件)

    <videosrc=”hangge.mp4″controls>video>

    ·1

    2,经过width和height设置视频窗口大小

    <videosrc=”hangge.mp4″controlswidth=”400″height=”300″>video>

    ·1

    3,预加载媒体文件
    设置preload不同的特点值,能够告知浏览器应该怎样加载一个媒体文件:
    (1)值为auto:让浏览器主动下载整个文件
    (2)值为none:让浏览器不必预先下载文件
    (3)值为metadata:让浏览器先获取视频文件最初的数据块,从而足以确定一些根本信息(比方视频的总时长,榜首帧图画等)

    <videosrc=”hangge.mp4″controlspreload=”none”>video>

    4,主动播映
    (1)运用autoplay特点能够让浏览器加载完视频文件后立即播映。

    <videosrc=”hangge.mp4″controlsautoplay>video>

    (2)假如启用主动播映,能够将播映器设置为muted状况。这样主动播映时会静音,避免用户厌烦。用户需求的话能够点击播映器扬声器图标重新翻开声响。

    <videosrc=”hangge.mp4″controlsautoplaymuted>video>

    5,循环播映
    运用loop特点让视频播映结束时,再从头开端播映。

    <videosrc=”hangge.mp4″controlsloop>video>

    6,设置替换视频的图片(封面图片)
    经过poster特点能够设置,浏览器在下面三种情况下会运用这个图片:
    (1)视频榜首帧未加载完毕
    (2)把preload特点设置为none
    (3)没有找到指定的视频文件

    <videosrc=”hangge.mp4″controlsposter=”hangge.png”>video>

    7,浏览器兼容,怎么让每一个浏览器都能顺利播映视频
    现在大部分浏览器都能支撑H.264格局的视频,但Opera浏览器却一直不支撑。咱们需求经过后备办法确保每个人都能看到视频,通常有下面几种计划:
    (1)运用多种视频格局
    和元素有个内置的格局后备体系。咱们不运用src特点,而是在其内部嵌套一组元素,浏览器会选择播映榜首个它所支撑的文件。
    咱们能够增加WebM格局的视频提供对Opera的支撑。

    <sourcesrc=”hangge.mp4″type=”video/mp4″>

    <sourcesrc=”hangge.webm”type=”video/webm”>

    (2)增加Flash后备办法(引荐)
    上面那个方法不引荐,应为Opera浏览器只占不到1%的份额。特意为它把视频都转码一边太费事。运用Flash作为备用播映计划还是很便利的,同时Flash还能兼容IE8这种连元素都不支撑的老浏览器。

    这儿运用FlowplayerFlash作为备用播映器(本地下载:flowplayer-3.2.18.zip)

    “hangge.mp4″type=”video/mp4”>

    “hangge.webm”type=”video/webm”>

    <objectid=”flowplayer”width=”400″height=”300″

    data=”flowplayer-3.2.18.swf”

    type=”application/x-shockwave-flash”>

    “movie”value=”flowplayer-3.2.18.swf”>

    “flashvars”value=’config={“clip”:”hangge.mp4″}’>

    object>

    (3)也有人优先运用Flash,而HTML5作为后备办法。
    这么做是因为Flash普及率比较高,而HTML5作为后备能够扩展iPad和iPhone用户

    <objectid=”flowplayer”width=”400″height=”300″

    data=”flowplayer-3.2.18.swf”

    type=”application/x-shockwave-flash”>

    “movie”value=”flowplayer-3.2.18.swf”>

    “flashvars”value=’config={“clip”:”hangge.mp4″}’>

    “hangge.mp4″type=”video/mp4”>

    “hangge.webm”type=”video/webm”>

    object>

  • 相关阅读:
    linux创建用户
    使用Myeclipse插件将wsdl生成java客户端代码
    JAVA时间格式转换大全
    数据库DDL语句书写规范
    jacon
    应用jacob组件造成的内存溢出解决方案(java.lang.OutOfMemoryError: Java heap space)
    为什么使用内部类
    HBase查找一条数据的过程
    Hadoop:输入,输出,key,value格式
    ArrayList和Vector的区别
  • 原文地址:https://www.cnblogs.com/lyyzhi/p/14324261.html
Copyright © 2020-2023  润新知