网页的媒体元素

包括

  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. LAMP集成环境搭建

    本教程是在centos6.8 64位系统下进行操作 我们首先准备搭建LAMP环境 LAMP指的是Linux.Apache.MySQL 和 PHP 如果要安装PHP5.5 需要 首先rpm -ivh h ...

  2. opencv图像加文字与运行时间

    //获取推断时间 vector<double>layterTimings; double freq = getTickFrequency() / 1000; //得到ms double t ...

  3. Educational Codeforces Round 82 (Rated for Div. 2)

    题外话 开始没看懂D题意跳了,发现F题难写又跳回来了.. 语文好差,码力好差 A 判第一个\(1\)跟最后一个\(1\)中\(0\)的个数即可 B 乘乘除除就完事了 C 用并查集判一下联通,每个联通块 ...

  4. 从零开始学 Java - 搭建 Spring MVC 记录云创的日子 第一章

    2017年11月29日 来到新项目,需要用到Spring MVC ,那么我就开始记录我这次的学习. Spring MVC 框架是围绕一个 DispatcherServlet 来设计的,这个 Servl ...

  5. redis看这一篇就够了

    redis的下载安装 准备相关依赖 yum install gcc 下载安装包 # 切换到存放安装包到目录 cd /usr/local # 下载安装包 wget http://download.red ...

  6. nodeJS菜鸟教程笔记

    http模块 var http = require('http'); // 引入http模块 var url = require('url'); // 引入url模块 var querystring ...

  7. 常用命令 在linux下

    1.拷贝某个目录及其下的所有的文件到另外一个目录 语法:cp -r <source directory name>/ <destination directory name>/ ...

  8. display: inline-block 布局

    三个元素display: inline-block; 布局 ,其中一个元素中存在其他元素也用了display: inline-block; 无法垂直居中,将这个元素设置为display: inline ...

  9. IDEA的Debug模式灰色无法运行

    1. 检查本地环境是否配置得当,进入项目右键看项目是否可以正常debug运行 2.  如果不可运行,那么选择File--Project Structrue 3. 修改Src文件,如图然后就可以正常使用 ...

  10. Java代码手段防止非法请求——防盗链

    Java代码手段防止非法请求,思路如下:        1. 获取到当前请求的域名,如www.a.com        2. 获取到请求资源的上一个地址        3. 判断上一个地址是否为空,如 ...