整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的 HTML5 视频播放器插件——MuiPlayer。
MuiPlayer 是一个开源的HTML5视频播放插件，其默认配置了精美可操作的的播放控件，涉及了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节等功能。支持 mp4、m3u8、flv 等多种媒体格式播放，解决大部分兼容问题，同时适应在PC、手机端播放。
使用 npm 安装：
npm i mui-player --save使用 yarn 安装：
yarn add mui-player1 使用 script 标签引入：
<!-- 引入基础样式文件 mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>
<!-- 引入基础脚本 mui-player.min.js -->
<script type="text/javascript" src="js/mui-player.min.js"></script>
<!-- 指定播放器容器 -->
<div id="mui-player"></div>或者使用模块管理器引入：
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'2 定义播放器容器
<div id="mui-player"></div>3 初始化构建播放器
// 初始化 MuiPlayer 插件，MuiPlayer 方法传递一个对象，该对象包括所有插件的配置
var mp = new MuiPlayer({
container:'#mui-player',
title:'标题',
src:'./static/media/media.mp4',
})以上就能为初始化构建一个具有默认配置控件的视频播放器。
更多API基础配置： https://muiplayer.js.org/zh/guide/api.html#%E4%B8%BB%E8%A6%81%E9%85%8D%E7%BD%AE
更多内容大家可自行前往阅读。
开源地址：https://gitee.com/muiplayer/hello-muiplayer
TMl 的标签可以分为单个标签和成对标签。
单个标签：html4 规定单个标签要有一个 / 表示结尾， html5 则不用
<!--单个标签-->
<meta>
<!--成对标签 -->
<div></div>以下是HTMl中常用的一些标签
div 标签 主要用来将相关的内容组合到一块，就像菜市场把各个蔬菜分成不同种类区分摆放是一个道理。
div 是最常见也是比较重要的标签，网页布局中经常使用的一类标签。通常布局被称为 DIV + CSS 布局
<div>
div 就是一个分类的存储箱子
</div>p标签表示段落， 在网页文字中应用的比较多
<!--段落和段落间会换行-->
<p>第一段</p>
<p>第二段</p>h标签分为六个
标签 | 语义 |
h1 | 一级标题 |
h2 | 二级标题 |
h3 | 三级标题 |
h4 | 四级标题 |
h5 | 五级标题 |
h6 | 六级标题 |
引用标题标签后，字体会加粗、字号一会变大
无序标签是没有显示顺序的列表，无序列表前面通常会有一个“小点”， 这个小点可以用type属性控制。其中有三个展示方式（不过这种方式比较固定，不够灵活和美观， 已经被CSS的效果代替），如下：
值（type属性） | 描述 |
disc | 默认值，实心圆 |
circle | 空心圆 |
square | 实心方框 |
举例:
<!--ul标签内部只能放置li标签-->
<!--li标签内部可以放其他的标签-->
<ul type=">
<li>无序列表元素1</li> <!--列表项-->
<li>无序列表元素2</li>
</ul>
实心圆
<ul type="disc">
<li>西红柿</li>
<li>黄瓜</li>
</ul>
空心圆
<ul type="circle">
<li>西红柿</li>
<li>黄瓜</li>
</ul>
实心方框
<ul type="square">
<li>西红柿</li>
<li>黄瓜</li>
</ul>type属性值 | 意义 |
a | 小写英文字母编号 |
A | 大写英文字母编号 |
i | 小写罗马数字编号 |
I | 大写罗马数字编号 |
1 | 数字编号（默认） |
有序列表, 从2开始
<ol start="2">
<li>元素1</li>
<li>元素2</li>
</ol>
小写字母表示
<ol type="a">
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ol>
倒叙
<ol reversed>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ol>dl标签表示自定义列表
dt表示数据项，dd表示数据定义， dd是dt标签的解释
<dl>
<dt>西红柿</dt>
<dd>红、酸</dd>
<dt>黄瓜</dt>
<dd>绿、涩</dd>
</dl>img 用来插入图片，包括但不限于以下图片格式
图片格式 | 备注 |
.jpg、.jpeg | 通常用于照片，是一种有损压缩格式 |
.png | 通常用于logo、背景，支持透明和半透明。便携式网络图像 |
.svg | 矢量图片 |
<!-- src(source)属性， 图片地址，可以为相对路径，也可以为绝对路径-->
<!-- alt 如果遇到图片无法加载的情况，网页上会展示 alt的 值 -->
<!-- width 和 height 表示 宽和高， 如果只设置一个， 那么另外一个就会跟着成比例缩放-->
<img src="./images/images.jpg" alt="星期一" width="120" height="20">用a标签来制作超级链接
<!-- href 属性 表示 其他页面的链接，支持相对路径和绝对路径，还可以链接到其它网站 -->
<!--target 属性表示 打开其他链接的方式-->
<!-- title 属性表示 链接的标题， 当鼠标移动到链接上，会展示出来-->
<a href="http://www.baidu.com" target="blank" title="文字标题">百度</a>
<!--也可以用a标签作为锚点 锚点可以是本页面的锚点，也可以是其他页面的锚点-->
<h1 id="title">头部标题</h1>
... 此处省略一些代码
<a href="#title">返回标题</a>
<!--下载链接，指向 doc， zip， zip等文件格式时，a标签将成为自动下载链接-->
<a href="./download/halou.zip">发邮件</a>
<!-- mailto:前缀的链接是邮件链接，系统将自动打开email相关软件-->
<a href="mailto:halouworld@126.com">发邮件</a>
<!-- tel: 前缀链接是电话链接，系统将自动打开拨号键-->
<a href="tel:11111111111">打开拨号键盘</a>audio标签用来插入音频标签
<!--添加 controls 后才会显示 播放控件-->
<!--常用音频格式 mp3 和 ogg格式-->
<!--autoplay 自动播放属性-->
<!--loop 属性表示循环播放-->
<audio controls src="./video/demo.mp3">
您的浏览器不支持 audio标签，请升级
</audio>
<audio controls src="./video/demo.mp3" autoplay loop>
您的浏览器不支持 audio标签，请升级
</audio>video 标签用于插入一段视频
<!--有的视频不能播放 ，详见 https://blog.csdn.net/weixin_34272308/article/details/94614657 -->
<!-- controls 显示视频播放控件 -->
<!-- autoplay 自动播放 -->
<!-- loop 循环播放 -->
<!-- 常见的 视频格式 mp4 ogv webm 等-->
<video controls autoplay loop src="./video/5-4 RDB2.mp4" >
您的浏览器不支持 video标签，请升级
</video>以前的区块标签只有div，现在为了更好的方便搜索引擎抓取网站，因此有了以下语义更加明确的区块标签
<section> | 文档的区域，比div语义上还要大一点 |
<header> | 页头 |
<main> | 网页核心部分 |
<footer> | 页脚 |
表单用来收集信息并且可以完成和后端的数据传输
表单中大致可以分为三种标签
一些表单的示例
<!--action 表示要提交到后端的网址-->
<!--method 表示表单提交的方式，通常有 get 、 post 、put、delete等-->
<form action="/save" meththo="post"></form>
<!--<form> 标签中 input 文本框 type="text" 表示文本框-->
<!-- value 表示文本框中的值 -->
<!--planceholder表示提示文字，在没任何输入值的情况下，作为提示信息-->
<!--disabled 表示禁用-->
<input type="text" value="123" planceholder="提示文字" disabled>
<!---单选按钮，name相等，表示选择了一个，另一个就不能选择了-->
<!--checked 表示默认被选中-->
<!-- value 属性表示要提交到后端服务器的值-->
<input type="radio" name="radio_group" checked>
<input type="radio" name="radio_group">
<label>
<input type="radio" name="sex"> 男
</label>
<label>
<input type="radio" name="sex"> 女
</label>
<!--html4 中的标签 通过for 属性 和 其他标签的id属性进行绑定-->
<input type="radio" name="sex" id="nan">
<label for="nan">男</label>
<input type="radio" name="sex" id="nv">
<label for="nv">女</label>
<!--复选框 type="checkbox" 同一组的的复选框，name值应该相同 ，复选框也有value值， 用于向服务器提交数据-->
<input type="checkbox" name="hobby" value="soccer" > 足球
<input type="checkbox" name="hobby" value="basket" > 篮球
<!--密码框-->
<input type="password" placeholder="请输入密码">
<!-- 下拉菜单 -->
<select>
<option value="alipay">支付宝</option>
<option value="wxpay">微信支付</option>
</select>
<!--多文本框 rows 和 clos 分别用于设置 行数 和 列数-->
<textarea rows="3" cols="5"></textarea>
<!--三种按钮 submit 提交按钮 button 普通按钮 可以简写为 <button></button> reset 按钮 重置按钮-->
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交表单">
<!--像 email 和 url 等格式，如果点击提交按钮，不符合格式，会有提示-->
<form>
日期空间: <input type="date"> <br/>
时间空间: <input type="time"> <br/>
日期时间空间 <input type="datetime-local"> <br/>
文件:<input type="file"> <br/> <br/>
数字控件: <input type="number"> <br/>
拖拽条: <input type="range"> <br/>
搜索框: <input type="search"> <br/>
网址控件: <input type="url"> <br/>
邮箱控件: <input type="email" >
<input type="submit" value="提交">
</form>
<!-- datalist 备选项示例 -->
<input type="text" list="province">
<datalist id="province">
<option value="陕西"></option>
<option value="山西"></option>
<option value="河北"></option>
<option value="山东"></option>
</datalist>可以用html渲染表格
<!--表格示例-->
<table border="1">
<caption>我是标题</caption>
<tr>
<th>第一列标题</th>
<th>第二列标题</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table><!--跨列示例-->
<table border="1">
<caption>我是标题</caption>
<tr>
<th>第一列标题</th>
<th>第二列标题</th>
</tr>
<tr>
<td colspan="2">跨两行</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<!--跨行示例-->
<table border="1">
<caption>我是标题</caption>
<tr>
<th>第一列标题</th>
<th>第二列标题</th>
</tr>
<tr>
<td rowspan="2">第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>篇介绍了前端入门——html 中如何使用图片,今天讲下如何使用视频和音频等多媒体元素，它们能让你的网页更加丰富，读者相对于文字图片更愿意观看视频和音频或其它多媒体。在本教程中，您将了解到不同的多媒体格式，以及如何在您的网页中使用它们。
是多种媒体的综合，一般包括文本，声音和图像等多种媒体形式。在计算机系统中，多媒体指组合两种或两种以上媒体的一种人机交互式信息交流和传播媒体。使用的媒体包括文字、图片、照片、声音、动画和影片，以及程式所提供的互动功能。
在因特网上，您会经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。
多媒体元素（比如视频和音频）存储于媒体文件中。多媒体元素也拥有带有不同扩展名字的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。具体有哪些格式可以参考 w3cshool 网站的介绍，https://www.w3cschool.cn/html5/html5-video.html ，https://www.w3cschool.cn/html5/html5-audio.html。
直到现在，网页上仍然不存在一项显示视频的标准。今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。
语法如下：
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video><video> 元素提供了播放、暂停和音量控件来控制视频。
同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸。如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道视频的大小，浏览器就不能在加载时保留特定的空间，页面就会根据原始视频的大小而改变。
<video> 与 </video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。一个页面可以使用多个<video> 标签，<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg。
显示效果：
和视频一样没有统一的标准，各个浏览器都不一样。HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。通过使用HTML5中的audio功能，你可以实现与flash相同的功能，即回放、跳转、缓冲等。
语法如下：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>control 属性供添加播放、暂停和音量控件。在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。允许使用多个 <source> 元素。<source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg。
显示效果：
插件（Plug-in）是扩展浏览器标准功能的计算机程序，插件被设计用于许多不同的目的：
1、<object> 元素
<object> 元素定义 HTML 文档中的嵌入式对象。
它旨在将插件（例如 Java applet、PDF 阅读器和 Flash 播放器）嵌入网页中，但也可以用于将 HTML 包含在 HTML 中。
如下：
插入一个网页片段
<object width="100%" height="500px" data="snippet.html"></object>或者插入一个图片
<object data="audi.jpeg"></object>播放一个视频
<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4">
<param name="controller" value="true">
</object>播放一个音频
<object height="100" width="100" data="song.mp3"></object>2、<embed> 元素
<embed> 元素也可定义了 HTML 文档中的嵌入式对象。这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效。
插入一个flash文件
<embed width="400" height="50" src="bookmark.swf">插入html片段
<embed width="100%" height="500px" src="snippet.html">播放一个音频
<embed height="100" width="100" src="song.mp3" />插入一个图片
<embed src="audi.jpeg">注意：
大多数浏览器不再支持 Java 小程序和插件。
大多数现代浏览器关闭了对 Flash 的支持。
我们可以使用 <video> 和 <audio> 标签来显示视频和音频
如下视频代码，HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败，则回退到 <embed> 元素。
HTML 5 + <object> + <embed> 是最好的解决办法。
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240" />
</object>
</video>如下音频代码，HTML5 <audio> 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 <embed> 元素。
HTML 5 + <embed> 是最好的解决办法。
<audio controls="controls" height="100" width="100">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>到此你以及了解了如何在网页中使用视频音频及其它多媒体控件，赶快自己试试，祝你学习愉快。
参考文献：https://www.w3school.com.cn/html/html_video.asp
上篇：前端入门——html 中如何使用图片
下篇：前端入门——html 表格的使用
*请认真填写需求信息，我们会在24小时内与您取得联系。
