html5的source元素

一、总结

一句话总结：

主要是解决视频播放时候的浏览器的兼容问题

二、html5的source元素

学习要点

  • 掌握source元素的用法

source元素-解决浏览器额兼容

  • HTML5 中新增的元素
  • video和audio元素的子元素，可指定多个文件来源，用来解决浏览器的兼容问题
  • 如果使用了source元素，则不可以在video和audio中设置src属性

实例

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>Document</title>

 6     <style type="text/css">

 7         h1{text-shadow: #A9A9A9 5px 5px 3px;}

 8     </style>

 9 </head>

10 <body>

11     <h1>这是一个测试阴影效果的标题</h1>

12     <details>

13         <summary>source详细介绍</summary>

14         <p style="color: #FFF000">

15             <ul>

16                 <li style="color: #FF0000">HTML5 中新增的元素</li>

17                 <li style="color: #FF0000">video和audio元素的子元素，可指定多个文件来源，用来<strong>解决浏览器的兼容问题</strong></li>

18                 <li style="color: #FF0000">如果使用了source元素，则不可以在video和audio中设置<strong>src属性</strong></li>

19             </ul>

20         </p>

21     </details>

22

23     <video  controls="" width="500">

24         <source src="res/video.mp4" type="video/mp4"></source>

25         <source src="res/video.webm" type="video/webm"></source>

26         你的浏览器暂不支持HTML5的vedio元素！

27     </video>

28 </body>

29 </html>
 

html5的source元素的更多相关文章

  1. HTML5 - 新增的元素，删除的元素

    1,HTML5新增的元素(1)用于构建页面的语义元素:<article>,<aside>,<figcaption>,<figure>,<foote ...

  2. 如何使用 HTML5 的picture元素处理响应式图片

    来自: http://www.w3cplus.com/html5/quick-tip-how-to-use-html5-picture-for-responsive-images.html 图片在响应 ...

  3. html5--4-3 source元素-解决浏览器的兼容

    html5--4-3 source元素-解决浏览器的兼容 学习要点 掌握source元素的用法 source元素-解决浏览器额兼容 HTML5 中新增的元素 video和audio元素的子元素,可指定 ...

  4. html5的video元素学习手札

    为了监控移动端视频播放的情况,研究了一下 html5 <video> 标签的属性与事件触发,及其在各系统和各个浏览器的兼容情况 属性与事件 理解清楚属性和事件,才能更好的使用 video ...

  5. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  6. HTML5语义化元素

    语义化元素:有意义的元素. 对语义化的理解: 正确的标签做正确的事情: HTML5语义化元素让页面内容结构化清晰: 便于开发人员阅读,理解,维护: 搜索引擎爬虫可以依赖语义化元素来确定上下文和每个关键 ...

  7. HTML5 canvas 内部元素事件响应

    HTML5 canvas 内部元素事件响应 isPointInPath 只能拿当前上下文的路径 重画每个部分 都isPointInPath判断

  8. HTML5 表单元素和属性

    HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...

  9. HTML5 <template>标签元素简介

    一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是“模板元素”. 目前,我们在HTML中嵌入模板H ...

随机推荐

  1. 中兴软开C++面经（一站式西安）- 2019秋招

    大概是9.6发短信邀请面试,但是6号有三个面试+一个在线笔试,就打算先去平安产险,看中途能不能再面个云从,中兴后面再面.然而,平安等了差不多4个小时才面完,期间云从面试官打来电话,只能说抱歉.中兴本来 ...

  2. SAP Marketing Cloud功能简述(五) : 销售计划管理

    Grace前四篇介绍SAP Marketing Cloud的文章: SAP Marketing Cloud功能简述(一) : Contacts和Profiles SAP Marketing Cloud ...

  3. 资源管理与调度系统-YARN资源隔离及以YARN为核心的生态系统

    资源管理与调度系统-YARN资源隔离及以YARN为核心的生态系统 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.什么是资源隔离 资源隔离是指为不同任务提供可独立使用的计算资源以 ...

  4. 快速搭建Kerberos服务端及入门使用

    快速搭建Kerberos服务端及入门使用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. Kerberos是一种网络身份验证协议.它旨在通过使用秘密密钥加密为客户端/服务器应用程序提 ...

  5. pip---cannot import name main解决方案

    .先来看下Python不同版本对应的路径 which python3. which python3. .使用update-alternatives --install建立链接 sudo update- ...

  6. 【编程开发】Python隐藏属性——使用双下划线标识私有属性，外部不可直接访问

           from:https://zhuanlan.zhihu.com/p/30553607 小编在最初使用上Python之后,就一发不可收拾,人生苦短.我用Python,不光是因为其优雅简洁, ...

  7. Mac上django 报错 [Errno 13] Permission denied: '/static'

    将setting文件中的 改成:

  8. HTTP头部

    10-URI的基本格式以及与URL的区别 HTTP连接的常见流程 从TCP编程上看HTTP请求处理 长连接与短连接 补充一下代理的知识 什么是正向代理,什么是反向代理? 想在外部公网访问公司内部局域网 ...

  9. 初【001】——Python 基础知识

    1.python基础入门 提示: 语法基于python3.x版本(会提示2.x版本和3.x版本的区别) Python命令行将以>>>开始,比如 >>>print ( ...

  10. 洛谷 P4408 [NOI2003] 逃学的小孩 题解

    Analysis 题意虽然说先去谁家再去谁家,但是我们不需要管这个,因为AA.BB.CC三个点我们可以任意互相交换它们所代表的对象,所以题目要求的就是在一棵树上找到3个点AA.BB.CC令AB+BCA ...