HTML 五十五 视频
在 HTML 中播放视频的方法有很多种。
<!DOCTYPE html>
<html>
<body><video width="320" height="240" controls="controls" autoplay="autoplay"><source src="/i/movie.ogg" type="video/ogg" /><source src="/i/movie.mp4" type="video/mp4" /><source src="/i/movie.webm" type="video/webm" /><object data="/i/movie.mp4" width="320" height="240"><embed width="320" height="240" src="/i/movie.swf" /></object>
</video></body>
</html>
问题,问题,以及解决方法
在 HTML 中播放视频并不容易!
您需要谙熟大量技巧,以确保您的视频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放。
使用 <embed> 标签
<embed> 标签的作用是在 HTML 页面中嵌入多媒体元素。
下面的 HTML 代码显示嵌入网页的 Flash 视频:
实例
<embed src="movie.swf" height="200" width="200"/>
问题
- HTML4 无法识别 <embed> 标签。您的页面无法通过验证。
- 如果浏览器不支持 Flash,那么视频将无法播放
- iPad 和 iPhone 不能显示 Flash 视频。
- 如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。
使用 <object> 标签
<object> 标签的作用是在 HTML 页面中嵌入多媒体元素。
下面的 HTML 片段显示嵌入网页的一段 Flash 视频:
<object data="movie.swf" height="200" width="200"/>
- 如果浏览器不支持 Flash,将无法播放视频。
- iPad 和 iPhone 不能显示 Flash 视频。
- 如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。
使用 <video> 标签
<video> 是 HTML 5 中的新标签。
<video> 标签的作用是在 HTML 页面中嵌入视频元素。
以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频:
实例
<video width="320" height="240" controls="controls"><source src="movie.mp4" type="video/mp4" /><source src="movie.ogg" type="video/ogg" /><source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
问题
- 您必须把视频转换为很多不同的格式。
- <video> 元素在老式浏览器中无效。
- <video> 元素无法通过 HTML 4 和 XHTML 验证。
最好的 HTML 解决方法
HTML 5 + <object> + <embed>
<video width="320" height="240" controls="controls"><source src="movie.mp4" type="video/mp4" /><source src="movie.ogg" type="video/ogg" /><source src="movie.webm" type="video/webm" /><object data="movie.mp4" width="320" height="240"><embed src="movie.swf" width="320" height="240" /></object>
</video>
上例中使用了 4 中不同的视频格式。HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败,则回退到 <embed> 元素。
问题
- 您必须把视频转换为很多不同的格式
- <video> 元素无法通过 HTML 4 和 XHTML 验证。
- <embed> 元素无法通过 HTML 4 和 XHTML 验证。
注释:使用 <!DOCTYPE html> (HTML5) 解决验证问题。
优酷解决方案
在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。
如果您希望在网页中播放视频,那么您可以把视频上传到优酷等视频网站,然后在您的网页中插入 HTML 代码即可播放视频:
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
width="480" height="400"
type="application/x-shockwave-flash">
</embed>
使用超链接
如果网页包含指向媒体文件的超链接,大多数浏览器会使用“辅助应用程序”来播放文件。
以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接,浏览器会启动“辅助应用程序”,比如 Windows Media Player 来播放这个 AVI 文件:
实例
<!DOCTYPE html>
<html>
<body><h2>点击该链接来播放这个对象</h2><a href="/i/bookmark.swf">播放视频文件</a> </body>
</html>
关于内联视频的一段注释
当视频被包含在网页中时,它被称为内联视频。
如果您打算在 web 应用程序中使用内联视频,您需要意识到很多人都觉得内联视频令人恼火。
同时请注意,用户可能已经关闭了浏览器中的内联视频选项。
我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是,在用户需要看到视频并点击某个链接时,会打开页面然后播放视频。
HTML 4.01 多媒体标签
标签 | 描述 |
---|---|
<applet> | 不赞成。定义内嵌 applet。 |
<embed> | 不赞成。定义内嵌对象。(HTML5 中允许) |
<object> | 定义内嵌对象。 |
<param> | 定义对象的参数。 |
HTML 5 多媒体标签
标签 | 描述 |
---|---|
<video> | 标签定义声音,比如音乐或其他音频流。 |
<embed> | 标签定义嵌入的内容,比如插件。 |
HTML 五十五 视频相关推荐
- 小米note3 android 8,手机 篇五十五:红米Note8Pro拍照翻车,竟不敌两年前小米Note3!...
手机 篇五十五:红米Note8Pro拍照翻车,竟不敌两年前小米Note3! 2020-01-29 06:10:14 5点赞 3收藏 5评论 正月初四,闲散在家,无聊至极,刷手机时无意中发现 DxOma ...
- 55.深度解密五十五:利用互联网思维进行实体行业“吸粉和变现”(实用性)
网络营销推广技术.技巧深度解密(五十五)指南: 1.本文档适合零基础以及互联网营销推广工作者,主要讲解实体行业微信吸粉和变现的另类操作问题. 2.原创版权文档,任何抄袭或者全部.部分模仿都是侵权行为. ...
- Python编程基础:第五十五节 map函数Map
第五十五节 map函数Map 前言 实践 前言 map函数的作用是将指定函数作用于一个可迭代对象内部的每一个元素,其表达方式为map(function, iterable),第一个位置指定作用函数,第 ...
- 【零基础学Java】—Socket类(五十五)
[零基础学Java]-Socket类(五十五) Socket类:该类实现客户端套接字,套接字是指两台设备之间通讯的端点. 在Java中,提供了两个类用于实现TCP通信程序 客户端:java.net.S ...
- JavaScript学习(五十五)—组合继承
JavaScript学习(五十五)-组合继承 组合继承:就是借用构造方法继承和原型链继承的组合形式
- 信息系统项目管理师核心考点(五十五)配置管理员(CMO)的工作
科科过为您带来软考信息系统项目管理师核心重点考点(五十五)配置管理员(CMO)的工作,内含思维导图+真题 [信息系统项目管理师核心考点]配置管理员(CMO)的工作 1.制定配置管理计划 2.识别配置项 ...
- 我的世界服务器群系修改,我的世界创世神教程 第五十五节修改选区的生物群系|功能介绍|难点介绍|这节...
我的世界WorldEdit创世神高级系列教程 第五十五节修改选区的生物群系.本教程由64条不同的技巧,功能介绍,难点介绍,防范措施介绍,工具介绍等组成.适合高级玩家和腐竹们来学习.这节内容给大家介绍修 ...
- 达芬奇密码 第五十五章 第五十六章
达芬奇密码 第五十五章 第五十六章[@more@] 第五十五章 索菲靠着兰登坐在长沙发上,喝着茶吃着烤饼,享受着食物的美味.雷·提彬爵士微笑着,在炉火前面笨拙地踱来踱去.假肢敲在地面上,发出" ...
- html5关于校庆作品名称,五十五周年校庆标语
办学宗旨:学校以基督教信仰为办学的基础及原则,提供优质教育,注重学生灵.德.智.体.群.美六育均衡发展,贯彻基督教全人教育的精神,使学生爱神爱人,品格端正,学识丰富,成为社会栋梁. 校训:敬畏耶和华是 ...
- [Python从零到壹] 五十五.图像增强及运算篇之图像平滑(均值滤波、方框滤波、高斯滤波)
又是一年1024,首先,祝大家节日快乐! 欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界 ...
最新文章
- CNN边缘检测--Richer Convolutional Features for Edge Detection
- 杂谈 | 微软复兴,它与苹果竟有这么多相似之处!
- codeforces 935E Fafa and Ancient Mathematics 语法树、动态规划
- 校验输入的两次密码是否一致的问题
- 剑指Offer(四):重建二叉树
- SPOJ LCS 后缀自动机
- 打造了一把安全的锁,不料把自己也锁在了里面
- POST型SQL注入教学
- H264 数据帧头分析
- 蓝桥杯--鲁卡斯队列
- 网易明日之后那个服务器人最多,明日之后:网易“公认”全服前4强营地出炉,竟全部来自一个区...
- 服务器管理口安装系统,管理口安装服务器操作系统
- While 循环语句 和do while循环语句
- python处理excel代码_[代码全屏查看]-python处理Excel文件
- linux3.5 usb键盘,CRUX 3.5发布下载,一款轻量级且为i686优化的Linux发行版
- 腾讯云接口调用签名鉴权
- python游戏房间_MakeCode Arcade 游戏合辑(1)
- c语言中target,C 11:使用std :: function :: target()指向成员函数的指针
- Field ‘userID‘ doesn‘t have a default value
- Ajax设置超时时间,Ajax请求延迟提示
热门文章
- 2019年南方电网和国家电网考纲对比(通信类)
- ac1900 linksys 恢复_Linksys WRT1900AC V2路由器拆解赏析
- 距离高考仅剩半年,如何才能快速冲刺985及清北?
- PHP Excel类Spreadsheet_Excel_Writer简介
- 四川省房产测绘实施细则[2010版]-2
- 干预oracle执行计划实验
- Android9.0 MTK8666平台摄像头数据分析
- atxserver运行没有反应_atxserver2 部署遇到一些问题
- Latex安装和示例
- 移动硬盘文件夹的权限问题