网页的媒体元素

包括

  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. ClosedXML、DocumentFormat.OpenXml导出DataTable到Excel

    在很多系统中都用到导出,使用过多种导出方式,觉得ClosedXML插件的导出简单又方便. 并且ClosedXML.DocumentFormat.OpenXml都是MIT开源. 首先通过 Nuget 安 ...

  2. gulp常用插件之gulp-load-plugins使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-load-plugins这是一款批量引入package.json文件中的依赖项工具. 更多使用文档请点击访问gulp-load-plug ...

  3. 【BZOJ 1022】 [SHOI2008]小约翰的游戏John(Anti_SG)

    Description 小约翰经常和他的哥哥玩一个非常有趣的游戏:桌子上有n堆石子,小约翰和他的哥哥轮流取石子,每个人取 的时候,可以随意选择一堆石子,在这堆石子中取走任意多的石子,但不能一粒石子也不 ...

  4. Candies POJ - 3159 差分约束

    // #include<iostream> #include<cstring> #include<queue> #include<stack> #inc ...

  5. 论文阅读笔记(六)【TCSVT2018】:Semi-Supervised Cross-View Projection-Based Dictionary Learning for Video-Based Person Re-Identification

    Introduction (1)Motivation: ① 现实场景中,给所有视频进行标记是一项繁琐和高成本的工作,而且随着监控相机的记录,视频信息会快速增多,因此需要采用半监督学习的方式,只对一部分 ...

  6. chm文件打开空白无内容

    问题描述 chm文件打开空白无内容 解决方案 选中 chm 文件,右键 - 属性- 在弹出的对话框中点击右下方的“接触锁定”,之后点击“应用”,再点击“确定”

  7. 生产环境容器落地最佳实践 --JFrog 内部K8s落地旅程

    引言 Kubernetes已经成为市场上事实上领先的编配工具,不仅对技术公司如此,对所有公司都是如此,因为它允许您快速且可预测地部署应用程序.动态地伸缩应用程序.无缝地推出新特性,同时有效地利用硬件资 ...

  8. Tiptop ERP 采购运费一键分摊

    项目背景: 公司的采购运费在逐年上升,之前财务都是做在管理费用中,金额大了后已经严重造成成本失真,所以财务要求it部能帮助分摊运费   1.纸质单据 2.系统入库单apmt720 3.系统请款单apm ...

  9. 树莓派4B遇到的坑

    由于大创需要用到机器学习这些东西,入手了一个树莓派4B(新手没弄过,直接上手最新版果然是有坑的),大佬勿喷

  10. Java并发,synchronized锁住的内容

    synchronized用在方法上锁住的是什么? 锁住的是当前对象的当前方法,会使得其他线程访问该对象的synchronized方法或者代码块阻塞,但并不会阻塞非synchronized方法. 脏读 ...