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

学习要点

  • 掌握source元素的用法

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

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

实例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

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

     </style>

 </head>

 <body>

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

     <details>

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

         <p style="color: #FFF000">

             <ul>

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

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

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

             </ul>

         </p>

     </details>

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

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

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

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

     </video>

 </body>

 </html>

html5--4-3 source元素-解决浏览器的兼容的更多相关文章

  1. jsp关闭或刷新浏览器（解决浏览器不兼容），请求后台onbeforeunload、onunload

    jsp关闭或刷新浏览器(解决浏览器不兼容),请求后台  onbeforeunload.onunload 1.看代码: function test(e) { var json = "退出,清理 ...

  2. HTML5的特殊标签与IE浏览器的兼容

    注释标签 ruby: 行级元素 横排显示 试图写多个汉字和注释,需要多个ruby. 直接上代码: - css样式: 页面效果: 重点标记 mark: 以灰常黄的黄色来重点标记 页面代码: 类似于进度条 ...

  3. 解决浏览器不兼容websocket

    本例使用tomcat 7.0的websocket做为例子. 1.新建web project.2.找到tomcat 7.0 lib 下的 catalina.jar,tomcat-coyote.jar添加 ...

  4. html5的source元素

    html5的source元素 一.总结 一句话总结: 主要是解决视频播放时候的浏览器的兼容问题 二.html5的source元素 学习要点 掌握source元素的用法 source元素-解决浏览器额兼 ...

  5. video，source元素

    一,视频 <video src="../[再一次快乐结局]第15集.mp4" controls="controls" width="500&qu ...

  6. js复制当前url地址解决浏览器兼容

    1.网上搜索的js复制链接代码,好像只能支持ie浏览器,其他浏览器不支持, 案例: var url=12; if(window.clipboardData){                   wi ...

  7. HTML5网页如何让所有的浏览器都能识别语义元素标签样式

    浏览器对语义元素的支持情况 如今HTML5愈来愈引发大家的关注了,但目前支持HTML5的浏览器还不是主流,特别是国内用户近50%以上仍旧使用IE6,由于支持HTML5的IE9不支持Xp系统安装,这样未 ...

  8. [Web] HTML5新特性history pushState/replaceState解决浏览器刷新缓存

    转载: https://www.jianshu.com/p/cf63a1fabc86 现实开发中,例如‘商品列表页’跳转‘商品详情页’,返回时,不重新加载刷新页面,并且滚动到原来的位置. 1.首先,先 ...

  9. IT兄弟连 HTML5教程 设置IE9以下版本浏览器支持HTML5

    HTML2.HTML5刚发布时由于各浏览器之间的标准不统一,开发者的时间都浪费在解决Web浏览器之间的兼容性上.但由于W3C和WHATWG对HTML5新版本的制定,以及近年来对HTML5的使用,再加上 ...

随机推荐

  1. 使用UltraISO为U盘或内存卡制作系统安装工具

    此软件可以为U盘制作Windows安装版的启动工具,也可以为Linux制作启动工具,尤其是Ubuntu这些.提示:推荐购买一些读取速度快一些的U盘,运行起来可以节省很多时间. 如果是内存卡要实现此功能 ...

  2. filter和spring 的interceptor都是单例的，都不是线程安全的

    Filter 是在 Servlet 容器启动时就初始化的,因此可以认为是以单例对象存在的,如果一个请求线程对其中的成员变量修改的话,会影响到其他的请求线程,因此认为是多线程不安全的.

  3. Android图片缓存之初识Glide（三）

    前言: 前面总结学习了图片的使用以及Lru算法,今天来学习一下比较优秀的图片缓存开源框架.技术本身就要不断的更迭,从最初的自己使用SoftReference实现自己的图片缓存,到后来做电商项目自己的实 ...

  4. 邁向IT專家成功之路的三十則鐵律 鐵律二十一：IT人用才之道-穿透

    在以道德為基礎的企業主管之人,其最根本的能力除了須要有洞悉事物的敏捷思維之外,眼光還必要有像水柱般一樣的穿山引石之能,如此不僅能夠為企業找到適才之人,更能為企業的永續經營奠定有如泰山般的基石.只可惜大 ...

  5. 【java】google的zxing架包生成二维码和读取二维码【可带文字和logo】

    承接RC4生成不重复字符串的需求之后,因为优惠码要方便用户使用的缘故,所以思来想去,觉得还是直接生成二维码给用户直接扫比较实用,也不用用户专门记录冗长的优惠码编号. ================= ...

  6. MBR结构解析与fdisk的bash实现

    一.MBR结构解析 首先我们先介绍一些MBR的基本知识基础,再晾图片分析. MBR主要分为三大块各自是: 1.载入引导程序(446K) 2.分区表(64k) 3.标志结束位(2k) 载入引导程序:内容 ...

  7. Balanced Binary Tree——数是否是平衡，即任意节点左右字数高度差不超过1

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  8. Redhat hadoop2.7.2安装笔记

    本次安装是在windows7环境下安装redhat虚拟机进行的,所须要的软件例如以下: VirtualBox-5.0.16-105871-Win.exe rhel-server-5.4-x86_64- ...

  9. 命令行查看w3wp进程信息

    用windbg.mdbg等调试器调试时,当出现多个w3wp进程并且用户名相同,需要区分每个w3wp进程对应的PID(进程ID)和应用程序池信息. 我们用以下方式得到每个w3wp进程的详细信息. Win ...

  10. substr使用注意

    substr使用时要判断起点和长度是否超过了串本身的长度,否则会抛异常