Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 1766|回复: 0

HTML 5 视频

  [复制链接]
  • TA的每日心情
    开心
    2021-3-12 23:18
  • 签到天数: 2 天

    [LV.1]初来乍到

    发表于 2011-8-9 23:17:48 | 显示全部楼层 |阅读模式
    Web 上的视频

    直到现在,仍然不存在一项旨在网页上显示视频的标准。
    今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
    HTML5 规定了一种通过 video 元素来包含视频的标准方法。


    视频格式
    当前,video 元素支持三种视频格式:
    格式IEFirefoxOperaChromeSafari
    OggNo3.5+10.5+5.0+No
    MPEG 49.0+NoNo5.0+3.0+
    WebMNo4.0+10.6+6.0+No
    Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
    MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
    WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件


    如何工作
    如需在 HTML5 中显示视频,您所有需要的是:
    1. <video src="movie.ogg" controls="controls"></video>
    复制代码


    control 属性供添加播放、暂停和音量控件。
    包含宽度和高度属性也是不错的主意。
    <video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的:
    实例
    1. <video src="movie.ogg" width="320" height="240" controls="controls">Your browser does not support the video tag.</video>
    复制代码

    上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。
    要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。
    video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:


    实例
    1. <video width="320" height="240" controls="controls">  <source src="movie.ogg" type="video/ogg">  <source src="movie.mp4" type="video/mp4">Your browser does not support the video tag.</video>
    复制代码

    <video> 标签的属性
    属性描述
    autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
    controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
    heightpixels设置视频播放器的高度。
    looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
    preloadpreload如果出现该属性,则视频在页面加载时进行加载,并预备播放。
    如果使用 "autoplay",则忽略该属性。
    srcurl要播放的视频的 URL。
    widthpixels设置视频播放器的宽度。




    效果如下:
    回复

    使用道具 举报

    该用户从未签到

    发表于 2011-9-24 10:23:09 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    发表于 2011-9-29 08:35:53 | 显示全部楼层
    回复 支持 反对

    使用道具 举报

    该用户从未签到

    发表于 2012-6-18 23:26:02 | 显示全部楼层
    好帖,确实好帖!
    悠哉网www.sadnook.com
    中国讲座在线www.douya5.cn
    尚生活www.027up.com
    悠哉教育www.yoozai.com
    虚拟主机www.whdata.net
    要爱你www.1l0.cn








    云服务器 www.whdata.net
    回复 支持 反对

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-5-18 16:50 , Processed in 0.550449 second(s), 46 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表