网页的媒体元素

包括

  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. gulp常用插件之gulp-size使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-size这是一款显示项目的大小插件. 更多使用文档请点击访问gulp-size工具官网. 安装 一键安装不多解释 npm install ...

  2. [PAT] A1022 Digital Library

    [题目大意] 给出几本书的信息,包括编号,名字,出版社,作者,出版年份,关键字:然后给出几个请求,分别按照1->名字,2->出版社等对应信息查询符合要求的书的编号. [思路] 模拟. [坑 ...

  3. Codeforces Round #624 (Div. 3)

    A.题意:通过加奇数减偶数的操作从a到b最少需要几步 签到题 #include <algorithm> #include <iostream> #include <cst ...

  4. pcl库卸载再重装

    系统版本:ubuntu 16.04 sudo rm -r /usr/include/pcl-1.7 /usr/share/pcl /usr/bin/pcl* /usr/lib/libpcl* sudo ...

  5. Codeforces 1304E. 1-Trees and Queries 代码（LCA 树上两点距离判奇偶）

    https://codeforces.com/contest/1304/problem/E #include<bits/stdc++.h> using namespace std; typ ...

  6. Qt Installer Framework翻译(8)

    好了,到这里翻译就结束了.各位可以下载源码,结合examples示例,使用repogen和binarycreator好好实操一下,就能掌握基础用法了.祝各位使用顺利. 官方文档网址:https://d ...

  7. 简单scrapy爬虫实例

    简单scrapy爬虫实例 流程分析 抓取内容:网站课程 页面:https://edu.hellobi.com 数据:课程名.课程链接及学习人数 观察页面url变化规律以及页面源代码帮助我们获取所有数据 ...

  8. [CF2B] The least round way - dp

    给定由非负整数组成的n×n 的正方形矩阵,你需要寻找一条路径: 以左上角为起点 每次只能向右或向下走 以右下角为终点 并且,如果我们把沿路遇到的数进行相乘,积应当是最小"round" ...

  9. Wannafly Camp 2020 Day 1H 最大公约数 - 质因数分解,高精度

    把每个质因子扒出来乱搞一下 #include <bits/stdc++.h> using namespace std; int g[505][505]; int isp[505]; str ...

  10. 用MyEclipse远程debug

    第一步 编辑 tomcat下的文件startup.sh文件,我的路径是 /root/apache-tomcat-6.0.24/bin/startup.sh 命令:vim startup.sh将decl ...