一,视频

<video src="../[再一次快乐结局]第15集.mp4" controls="controls" width="500" height="300" poster="../1.jpg" loop="loop" autoplay="autoplay" preload="auto"> 您的浏览器暂不支持! </video>

注意:此标签不在input标签内

control:显示视频的播放,音量,暂停等工具栏

width,height:视频的长宽

poster:播放前的预览图

loop:当图片结束时,重新播放

autoplay:加载结束自动播放

preload:  1.auto:自动加载视频的播放时间,播放内容

2.none:默认值

3.metadata:自动加载视频的时间,但不加载播放的内容

<video width="500" controls="controls" > 您的浏览器暂不支持!
<source src="../[再一次快乐结局]第15集.mp4" type="video/mp4" />
<source src="../[再一次快乐结局]第15集.webm" type="video/webs" />
<source src="../[再一次快乐结局]第15集.ogg" type="video/ogg" />
</video>

您的浏览器暂不支持此格式! 
</video>

source:解决浏览器的兼容性问题,但此时video标签内不能使用src

以上三种视频格式,浏览器会根据格式选择播放,哪种格式合适就哪种,若格式都不满足,将会显示source标签中的内容;

二,音频

<audio controls="controls" > 您的浏览器暂不支持!
<source src="../爱你.mp3" type="audio/mp4" />
<source src="../爱你.webm" type="audio/webs" />
<source src="../爱你.ogg" type="audio/ogg" />
</audio>

与video相比,减少的属性:width poster

video,source元素的更多相关文章

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

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

  2. html5的source元素

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

  3. HTML5之多媒体

    概览 html5新增了两个关于多媒体的元素:video和audio,前者是用于视频,后者用于音频.而他们使用非常简单 <audio src="xhn.mp3" control ...

  4. 02_HTML5+CSS详解第三天

    WebStorage简单的网页留言板用到的函数有3个1.saveStorage函数使用"new Date().getTime()"语句来获取当前的日期和时间戳,然后使用localS ...

  5. audio和video元素

    目录 [1]HTML元素 audio video source track[2]API 方法 属性 事件 audio专有 前面的话 HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能 ...

  6. javascript 创建video元素

    <!DOCTYPE html> <html> <body> <h3>演示如何创建 VIDEO 元素</h3> <p>请点击按钮来 ...

  7. video元素和audio元素

    内容: 1.video元素 2.audio元素 注:这两个元素均是HTML5新增的元素 1.video元素 (1)用途 <video> 标签定义视频,比如电影片段或其他视频流 (2)标签属 ...

  8. html5的video元素学习手札

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

  9. 《HTML5》 Audio/Video全解

    一.标签解读 <audio> 标签属性 <audio id="media" src="http://www.abc.com/test.mp3" ...

随机推荐

  1. Triangle - POJ 2954(求三角形内的格子点的个数)

    Pick公式:平面上以格子点为顶点的简单多边形的面积=边上的点数/2+内部的点数+1. 代码如下: -------------------------------------------------- ...

  2. Android模拟器报"Failed To Allocate memory 8"错误的解决办法

    此错误是我们在允许AVD时,选择了默认的AVD插件所致. 解决方法:减少分配的内存大小.修改AVD的config.ini配置文件,将选项“hw.ramSize=1024”从1024改为256.

  3. Centos系统python2.x升级python3.x

    1. Centos7初始安装的python版本为2.7.5 2.下载最新的python3.5.2,解压到/usr/local/src 3. 配置.编译.测试.安装(根据软件的README说明) ./c ...

  4. FlexboxLayout 的一些基本介绍与基本用法

    1什么是 Flexbox 简单来说 Flexbox 是属于web前端领域CSS的一种布局方案,是2009年W3C提出了一种新的布局方案,可以简便.完整.响应式地实现各种页面布局,并且 React Na ...

  5. Android iOS Dribbble风格边栏菜单实现

    随着IOS7的推出,大量移动应用也开始进行了重新设计.,开始应用大量的扁平化.可以说现在IOS和Android的风格设计方面确实是在逐渐地靠拢. ReisdeMenu 创意灵感来自于Dribbble( ...

  6. Struts标签<s:iterator>遍历访问复杂Map对象

    <s:iterator value="resultType" id="geneUi"> //拿到要遍历的Map对象 <s:iterator v ...

  7. macos下使用rvm管理ruby版本和rails版本

    1. 安装rvm curl -L https://get.rvm.io | bash -s stable 查看rvm 版本 2. 安装ruby rvm install 2.3.1 查看ruby 版本 ...

  8. 色情不是我的所有——在法律边缘起舞的 FC2

    [核心提示] 世界上最大的色情站点之中的一个这项「殊荣」只是是 FC2 无心插柳被用户戴上的一顶帽子,这个从 1999 年成立至今已经超过 15 年历史的互联网活化石,远比你想象中更加高深莫測. 一个 ...

  9. 单片机IO口驱动能力

    以STM32的IO口为例,最大的输出电流和灌入电流在芯片手册上都有说明.单个IO口一般都是十几mA到几十mA,同时总的VDD电流也有限制,大概为150mA.所以单片机驱动外设时,如果不是信号型而是功率 ...

  10. 阿里云SQL Server 2008 客户端导入数据库教程

    一.适用场景   源端数据库是SQL Server 2005 及以上.(SQL Server 2000未测试.) 数据文件总大小在10G以内. 可以在低峰期停应用.   二.导出步骤   1.软件准备 ...