<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--embed:可以直接插入音频视频，本质是通过本机安装的音频视频播放软件来播放的。要求必须已经安装了这些软件  兼容性-->

<!--flash:  1.先学习flash,增加使用成本  2.iphone,ipd,不支持flash-->

<!--audio:音频-->

<!--

src:播放文件的路径

controls:音频播放器的控制器面板

autoplay:自动播放

loop:循环播放-->

<!--<audio src="../mp3/aa.mp3" controls></audio>-->

<!--video：视频-->

<!--

src:播放文件的路径

controls:音频播放器的控制器面板

autoplay:自动播放

loop:循环播放

poster:指定视频还没有完全下载完毕，或者用户没有点击播放前显示的封面。 默认显示当前视频文件的第一副图像

width:视频的宽度

height:视频的高度

-->

<!--注意事项：视频始终会保持原始的宽高比。意味着如果你同时设置宽高，并不是真正的将视频的画面大小设置为指定的大小，而只是将视频的占据区域设置为指定大小，除非你设置的宽高刚好就是原始的宽高比例。所以建议：在设置视频宽高的时候，一般只会设置宽度或者高度，让视频文件自动缩放-->

<!--<video src="../mp3/mp4.mp4" poster="../images/l1.jpg" controls  height="600"></video>-->

<!--source:因为不同的浏览器所支持的视频格式不一样，为了保证用户能够看到视频，我们可以提供多个视频文件让浏览器自动选择-->

<!--<video src="../mp3/flv.flv" controls></video>-->

<video controls>

    <!--视频源，可以有多个源-->

    <source src="../mp3/flv.flv" type="video/flv">

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

</video>

</body>

</html>

H5 多媒体标签的更多相关文章

  1. H5新标签(适合新手入门)

    H5新标签 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTML5 sublime 输入 html:5 < ...

  2. H5 音频标签自定义样式修改以及添加播放控制事件

    说明: 需求要求这个音频标签首先要是可适配移动端浏览器的,音频样式就是参考微信做的. 最终效果如下: 具体实现 思路: H5 的 <audio> 标签是由浏览器负责实现默认样式的.所以不同 ...

  3. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  4. h5新增标签及css3新增属性

    - h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...

  5. H5多媒体（用面向对象的方法控制视频、音频播放、暂停、延时暂停）

    视频,音频播放器会是我们在工作中用到的一些h5新标签,它自带一些属性,比如暂停播放,快进快退,但是,我们经常不用原生的样式或者方法,我们需要自定义这些按钮来达到我们需要的样式,也需要我们自定义来实现一 ...

  6. H5新标签

    1. H5新标签 语义标签: <article>定义文章</article><aside>定义文章侧边栏</aside> <figure>定 ...

  7. IIS 配置 FTP 网站 H5 音频标签自定义样式修改以及添加播放控制事件

    IIS 配置 FTP 网站   在 服务器管理器 的 Web服务器IIS 上安装 FTP 服务 在 IIS管理器 添加FTP网站 配置防火墙规则 说明:服务器环境是Windows Server 200 ...

  8. 027 H5常用标签

    只记录一下比较有趣的知识点. 一:新标签 1.选项列表datalist <!DOCTYPE html> <html lang="en"> <head& ...

  9. H5 video 标签 详解

    昨天使用H5  video 标签 写了视频播放   本打算参考爱奇艺的代码进行修改  发现 它是动态数据  静态页面需要拆解代码 我情急之下  使用了  video   整理一下笔记   后面有人用 ...

随机推荐

  1. POJ1190 洛谷P1731 NOI1999 生日蛋糕

    生日蛋糕(蛋糕是谁?) Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 20272   Accepted: 7219 Desc ...

  2. NOIP模拟 7.05

    Problem 1 双色球(ball.cpp/c/pas) [题目描述] 机房来了新一届的学弟学妹,邪恶的chenzeyu97发现一位学弟与他同名,于是他当起了善良的学长233 “来来来,学弟,我考你 ...

  3. 【水滴石穿】ReactNativeMobxFrame

    项目地址如下:https://github.com/FTD-ZF/ReactNativeMobxFrame 应该可以说的是,项目也只是一个花架子,不过底部的tab稍微改变了 我们一起来看代码 //in ...

  4. JDBC操作数据库实例

    jdbc操作数据库实例 1.jdbc创建数据库 1.1 前提条件 1.拥有创建和删除表的权限 2.数据库已经启动,且可用 1.2 jdbc创建数据库表的步骤: 导包:导入需要进行数据库编程的 JDBC ...

  5. 判断字符s是否为正整数和正小数

    下面一段代码是判断是否为正整数和正小数的:

  6. 2019-6-23-WPF-获得当前输入法语言区域

    title author date CreateTime categories WPF 获得当前输入法语言区域 lindexi 2019-06-23 11:51:21 +0800 2018-10-12 ...

  7. Flask学习之十三 日期和时间

    英文博客地址:http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-xiii-dates-and-times 中文翻译地址: ...

  8. 13-2 jquery介绍

    1 什么是 jQuery jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率. js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面 ...

  9. Pytorch的网络结构可视化（tensorboardX）（详细）

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/xiaoxifei/article/det ...

  10. ORACLE学习笔记-ORACLE（基本命令）

    --查看VGA信息: show sga; select * from v$sgastat;--可以通过以下几个动态性能视图查看信息: V$sysstat                系统统计信息 V ...