网页的媒体元素

包括

  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. node--处理一个增加上传操作和渲染页数条

    一段学习的结束 我也不知道我这是在写些什么,只是觉得学完了一些东西,就是想把它记录 一下,这样我就可以知道我是学过这一块的,要多激励自己,^^O(∩∩)O哈哈~ 以下内容并不完全与标题匹配,不过以下内 ...

  2. 剑指offer-面试题23-链表中环的入口节点-双指针

    /* 题目: 如果链表中包含环,如何找出环的入口? */ /* 思路: 双指针: 1.判断是否有环. fast指针一次2步,slow指针一次1步,当fast与slow相遇时,说明有环. 2.判断环路中 ...

  3. gulp常用插件之gulp-babel使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-babel这是Babel的Gulp插件. 此自述文件适用于gulp-babel v8 + Babel v7检查7.x分支以了解使用Bab ...

  4. JSP+Servlet开发物流管理系统 源码

    开发环境: Windows操作系统开发工具:Myeclipse+Jdk+Tomcat+MYSQL数据库 运行效果图:

  5. 关于2008R2的序列号

    windows server 2008 r2 企业版序列号 BX4WB-3WTB8-HCRC9-BFFG3-FW26F P63JV-9RWW2-DJW7V-RHTMT-W8KWJ MDB49-7MYG ...

  6. tomcat常见状态码

  7. RHEL/CentOS 7中Nginx的systemd service

    源码安装的nginx ,没有systemd service 管理 nginx 下面教程,告诉你如何设置nginx 的systemd service nginx systemd的服务文件是/usr/li ...

  8. 阿里云部署JeecgBoot

    阿里云部署JeecgBoot 首先贴出官网教程:http://jeecg-boot.mydoc.io/?t=345682 自己在部署的时候遇到了各种各样的问题,其实一步一步的按照官网给出的步骤来是没问 ...

  9. centOS添加ipv6支持（仅限已分配ipv6地址和网关）

    https://blog.csdn.net/cnmilan/article/details/8493977 CentOS 环境下 IPv6设置方法: 1)/etc/sysconfig/network  ...

  10. 互联网的“ip分组交换技术”

    (1)从名字分析 从“ip分组交换”这个名字中,我们看看涉及哪些事情. 1)交换 主要涉及两类交换. · 交换机:负责网内部数据交换 · 路由器:负责网间的数据交换. ip分组交换技术的核心就是路由器 ...