网页的媒体元素

包括

  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. 手写数字识别——基于LeNet-5卷积网络模型

    在<手写数字识别——利用Keras高层API快速搭建并优化网络模型>一文中,我们搭建了全连接层网络,准确率达到0.98,但是这种网络的参数量达到了近24万个.本文将搭建LeNet-5网络, ...

  2. vue 学习2

    模板指令.属性总结 html 中的标签属性 1. :class 值是对象,key为class 的值,值为boolean类型 html标签任意属性都可以:属性,表示动态值(值是变化的,不是固定不变的) ...

  3. Parity game POJ - 1733 带权并查集

    #include<iostream> #include<algorithm> #include<cstdio> using namespace std; <& ...

  4. 已知float后几位,谋几位保留

    设变量n为float类型,m为int类型,则以下能实现将n中的数值保留小数点后两位,第三位进行四舍五入运算的表达式____. #include "common.h" #includ ...

  5. MySQL优化(三)——主从复制

    1.MySQL高可用        主从复制      一主多备      多主多备           2.MySQL主从复制        主机所有写的数据都会生成二进制SQL日志执行文件,从机只 ...

  6. pandas玩转excel-> (2)如何利用pandas读取excel数据文件

    import pandas as pd #将excel文件读到内存中,形成dataframe,并命名为peoplepeople=pd.read_excel('D:/python结果/task2/Peo ...

  7. mysql权限过滤

    1.用like做权限过滤 上级部门可以看到下级部门发布的正式文件,下级部门不能看到上级部门发布的正式文件 SELECT*FROM cms_nrgl_st a, mz_xzjg bWHERE a.sys ...

  8. Query的选择器

    Query的选择器   一. 基本选择器   1. ID选择器            ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素,并以iQuery包装集的形式返回给对象.      ...

  9. pip问题：Traceback (most recent call last): File "/usr/bin/pip", line 9, in

    源作者blog https://blog.csdn.net/vmxhc1314/article/details/81869676 编辑提示的文件,进行更改即可. 解决方法: 将 /usr/bin/pi ...

  10. D - How Many Answers Are Wrong HDU - 3038【带权并查集】

    How Many Answers Are Wrong Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Ja ...