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. 社交类app开发（ 仿陌陌 客户端+服务器端）

    一.开发所需要的技术 手机端需要Android/iOS开发人员,服务器端需要php/数据库开发人员, 如果再做网页版的话,WEB开发也是要的. 即时通讯 GPS地图 群聊 差不多 对 http  so ...

  2. 小米5s plus刷机

    1. 先去这里解锁 .http://www.miui.com/unlock/done.html 2.再去开发者选项里面,将手机账号和解锁手机绑定. 3.使用解锁工具解锁 4.下载安装奇兔刷机 http ...

  3. （Linux基础学习）第五章：Linux中的screen应用

    第1节:安装screen1.加载系统镜像文件,因为screen的安装包在系统镜像文件中图001 2.列出系统上所有的磁盘[root@centos6 ~]# lsblk图002 3.安装screen应用 ...

  4. Java中处理接口返回base64编码的图片数据

    在做接口测试的时候,某些接口返回的content是一大段加密文字.这种情况下,有可能是返回的图片加密数据,需要将这些数据转换成图片进行保存查看. 例如: 这里,可以看到Content对应的键值开头有“ ...

  5. python3 queue队列

    一.queue队列 1.python3中的队列模块是queue,不是Queue 2.一般涉及到同步,多线程之类用到队列模块 3.定义了 queue.Queue 类,以及继承它的 queue.LifoQ ...

  6. springboot进行热部署项目

    百度了挺多的热部署,一种就是idea中一个插件,但是听说还需要 花钱,而且效果还是不太好. 自己按照网上的经验配置了一种属于自己的热部署,下面是详细的配置过程: 一.就是引入热部署需要的依赖: < ...

  7. 移动App性能评测与优化-Android内存测试 ，DVM原理

    常见的测试方法包括Monkey/UIAutomator类的常规压力测试,大数据/操作的峰值压力测试,长时间运行的稳定性测试等. 前提: 测试准备:版本是纯净版本,不应该附加多余的log和调试用组件. ...

  8. keras模块学习之model层【重点学习】

    本笔记由博客园-圆柱模板 博主整理笔记发布,转载需注明,谢谢合作! model层是keras模块最重要的一个层,所以单独做下笔记,这块比较难理解,本博主自己还在学习这块,还在迷糊中. model的方法 ...

  9. 团队协作editconfig与eslint

    editconfig root = true [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf ins ...

  10. 超实用的JQuery小技巧

    JQuery是一个 JavaScript 库,她极大的简化了我们对 JavaScript 的编程. 今天我们总结了下平常项目中用到的一些小技巧,仅供参考. 1.替换元素 //替换元素 $(docume ...