网页的媒体元素

包括

  1. 视频

  2. 音频

首先创建一个文件夹，放视频和音频

     

 

播放(非自动播放+自动播放)

  1. 视频播放

1.1. 打开网页不自动播放

<video src="../resources/video/视频.mp4" controls></video>

1.2. 打开网页自动播放

<video src="../resources/video/视频.mp4" controls autoplay></video>

  1. 音频播放

2.1. 打开网页不自动播放

<video src="../resources/audio/音频.mp3" controls></video>

2.2. 打开网页自动播放

<video src="../resources/audio/音频.mp3" controls autoplay></video>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--视频播放-->
<video src="../resources/video/视频.mp4" controls autoplay></video>
<!--音频播放-->
<video src="../resources/audio/音频.mp3" controls autoplay></video>
</body>
</html>

HTML的媒体元素(视频+音频)的更多相关文章

  1. HTML5实战与剖析之媒体元素(6、视频实例)

    HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比較多.由于手机端基本上废除了flash的独断.让HTML5当家做主人,所以对视频支持的比較好. 所以今天专门为大家奉上HTML5视频标 ...

  2. 与众不同 windows phone (14) - Media（媒体）之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成

    原文:与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成 [索引页][源码下载] 与众不同 win ...

  3. HTML5中支持新的媒体元素有这些

    HTML5对媒体的支持性很强,支持以下媒体元素: · audio  定义音频 · video  定义视频 · embed  作为外部应用的容器 · source  多种媒体源的支持 · track   ...

  4. 《JAVASCRIPT高级程序设计》原生拖放和媒体元素

    一.原生拖放 最早在网页中引入javascript拖放功能的是IE4,当时,网页中只有两种对象可以拖放:图像和某些文本.而现在,几乎网页中的任何元素都可以拖放以及作为放置目标.下面介绍一些与拖放相关的 ...

  5. 【学习笔记】HTML基础：列表、表格与媒体元素

    一.列表是信息资源的一种展现形式,它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能够快速的获取相应的信息. 1.无需列表 <ul> <li>第一项</li ...

  6. HTML5 第二章 列表和表格和媒体元素

    列表: (1)什么是列表? 列表就是信息资源的一种展示形式. (2)无序列表: 语法: <ul> <li>第1项</li> <li>第2项</li ...

  7. HTML的列表，表格与媒体元素

    一.无序列表 <ul>                            <li>无序列表</li>                            &l ...

  8. HTML列表,表格与媒体元素

    一.无序列表 <ul> <li>无序列表</li> <li>有序列表</li> <li>自定义列表</li> < ...

  9. HTML5实战与剖析之媒体元素

    随着HTML5的到来,flash在手机端全部不能得到支持,这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了.很恰巧的是,移动端对HTML ...

随机推荐

  1. CF573E Bear and Bowling（6-1）

    题意 洛谷 做法一 考虑一种贪心(先别管对不对),设当前已选择的集合为\(A\),这是考虑该集合的补集,每个元素加进来后的增量为\(V_i\),则挑选最大的那个加入该集合 结论1:遵循上述贪心,\(\ ...

  2. 【Vue2.x笔记1】数据响应式原理

    1.Object.defineProperty Vue2.x 使用Object.defineProperty 将 Vue 实例中的data对象全部转为getter/setter.在内部让 Vue 能够 ...

  3. 题解 P5712 【【深基3.例4】Apples】

    题目传送门 思路 仔细读题后,我们可以发现,输出可以分成\(2\)种情况,apple加s与apple不加s,所以我们可以使用if/else来实现. 接着,我们读入n. int n; cin>&g ...

  4. Git和TortoiseGit

    1.简介 Git是一个开源的分布式版本控制系统,用于敏捷高效的处理任何或大或小的项目.它采用了分布式版本库的方式,不必服务器端软件支持. 2.Git和Svn的区别 1.Git 是分布式的,SVN 不是 ...

  5. Dart单例模式最佳实践

    /// Created by Capt. Michael @ CaptNotes.com on 02/17/2020. class Singleton { Singleton._(); static ...

  6. Java对MongoDB进行分组操作并统计各个分组的数量

    最近在检索MongoDB的数据时需要用到分组操作,由于没有现成的说明文档可参考,只能是在代码中不断调试.摸索前进:目前已现实了Java对MongoDB的分组操作,并统计各个分组的数量.现通过示例详细解 ...

  7. MySQL的操作数据库SQL语法

    MySQL的操作数据库SQL语法 顺序:操作数据库 > 操作数据库中的表 > 操作数据库中的表的数据 MySQL不区分大小写字母 1. 操作数据库 1.创建数据库 2.删除数据库 3.使用 ...

  8. 如何在Windows上开启Ping或者禁止PING

    方法1:命令行模式 进入服务器后 点击 开始——运行 输入命令: netsh firewall set icmpsetting 8 这样就可以在外部ping到服务器了 非常简单实用! 同样道理,如果想 ...

  9. 简单理解Linux系统的挂载是什么鬼

    转载自http://c.biancheng.net/view/2859.html Linux系统中“一切皆文件”,所有文件都放置在以根目录为树根的树形目录结构中.在 Linux 看来,任何硬件设备也都 ...

  10. Python中pip的使用

    1.pip安装模块 pip install 模块名称 -i 安装源 pip install requests -i https://mirrors.aliyun.com/pypi/simple/