html5的source元素
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元素的更多相关文章
- HTML5 - 新增的元素,删除的元素
1,HTML5新增的元素(1)用于构建页面的语义元素:<article>,<aside>,<figcaption>,<figure>,<foote ...
- 如何使用 HTML5 的picture元素处理响应式图片
来自: http://www.w3cplus.com/html5/quick-tip-how-to-use-html5-picture-for-responsive-images.html 图片在响应 ...
- html5--4-3 source元素-解决浏览器的兼容
html5--4-3 source元素-解决浏览器的兼容 学习要点 掌握source元素的用法 source元素-解决浏览器额兼容 HTML5 中新增的元素 video和audio元素的子元素,可指定 ...
- html5的video元素学习手札
为了监控移动端视频播放的情况,研究了一下 html5 <video> 标签的属性与事件触发,及其在各系统和各个浏览器的兼容情况 属性与事件 理解清楚属性和事件,才能更好的使用 video ...
- HTML5 画布canvas元素
HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...
- HTML5语义化元素
语义化元素:有意义的元素. 对语义化的理解: 正确的标签做正确的事情: HTML5语义化元素让页面内容结构化清晰: 便于开发人员阅读,理解,维护: 搜索引擎爬虫可以依赖语义化元素来确定上下文和每个关键 ...
- HTML5 canvas 内部元素事件响应
HTML5 canvas 内部元素事件响应 isPointInPath 只能拿当前上下文的路径 重画每个部分 都isPointInPath判断
- HTML5 表单元素和属性
HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...
- HTML5 <template>标签元素简介
一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是“模板元素”. 目前,我们在HTML中嵌入模板H ...
随机推荐
- 内存域水印值:min_free_kbytes
1.内存域水印值:需要为关键性分配保留的内存空间的最小值:该值保存在全局变量min_free_kbytes中 2.内存域水印值的计算由函数init_per_zone_pages_min完成: /* * ...
- 从零开始学虚拟DOM
此文主要翻译自:Building a Simple Virtual DOM from Scratch,看原文的同学请直达! 此文是作者在一次现场编程演讲时现场所做的,有关演讲的相关资料我们也可以在原英 ...
- jenkens docker启动
docker run \ -u root \ --rm \ -d \ -p 8080:8080 \ -p 50000:50000 \ -v jenkins-data:/var/jenkins_home ...
- LAMP环境搭建之编译安装指南(php-5.3.27.tar.gz)
测试环境:CentOS release 6.5 (Final) 软件安装:httpd-2.2.27.tar.gz mysql-5.1.72.tar.gz php-5.3.27.tar.gz 1 ...
- Centos7 docker安装GitLab
*先决条件系统已安装Docker 1.查询GitLab镜像 docker search gitlab 2.现在GitLab镜像 3.创建文件夹 mkdir -p /software/gitlab/co ...
- helm笔记
一.注意事项 1.values.yaml 中可以使用'#'号注释行,而/templates 下的文件不能用#号,如果要注释可以使用 {{/* context */}} 2.{{- #忽略 ...
- 如何使用MCUXpresso IDE创建一个Cortex-M工程
拿到Cortex-M开发板之后,就可以开始使用MCUXpresso IDE上手入门.在这个教程中,我们将详细介绍如何基于CMSIS(Cortex微控制器软件接口标准)在MCUXpresso IDE中为 ...
- 2.遍历XML即添加修改节点
1.xml <?xml version="1.0" encoding="utf-8" ?> <stories> <story ac ...
- js数组的操作大全
用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多,自以为js高手的自己居然无从下手,一下狠心,我学!呵 ...
- PHP项目部署 Linux 服务器
一.运行环境 Centos7 x64 lnmp (Linux , Nginx , Mysql , PHP/Python) 二.安装依赖和修改配置 安装Lnmp环境集成包:https://lnmp.or ...