整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
网页中添加视频、声音、动画等，可以增强用户体验。在HTML5之前，为网页添加多媒体的唯一办法，就是使用第三方的插件（如，Adobe Flash等）。
HTML5中，提供了对多媒体的原生支持，只需通过 video 元素，就可以向网页嵌入视频、电影或音频资源，通过 audio 元素向网页嵌入音频资源，省时省力。
HTML中嵌入视频和音频代码
在HTML5时代，在网页中嵌入视频非常简单，只需要一个 video 元素，并设置它的 src 属性，使其链接一个视频地址就可以完全搞定了，这个太esay了
<video src="media/vedio.mp4"></video>
把这个网站在IE8中打开一看，网站上除了一片空白外，什么也没有，这是为什么呢？
原来 video 是HTML5最新引入的元素，并不是所有浏览器都支持它，IE8及以下版本都无法识别 video 标签。如果浏览器不识别 video标签，则会忽略它，当做什么都没有。这就是网站上一片空白的原因。
这个问题好解决，只需在 video 标签之间放置文本信息，不支持 video 标签的老浏览器，会显示 video 标签之间的文本信息，以提示用户浏览器不支持 video，就这么简单！
<video src="media/vedio.mp4">
你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！
</video>
在IE8上打开一看，确实显示了提示文本，这下好多了，至少用户知道自己的浏览器不能播放视频，该换浏览器了。
下载了Opera浏览器的最新版本25.0，打开一看，怎么还是一片空白外！Opera浏览器明明是支持video标签的，那又是为什么呢？
这个就得从视频的编码格式说起了。video 元素支持三种视频格式：Ogg、MP4、WebM。
Ogg是带有Theora视频编码和Vorbis音频编码的文件，后缀名为 .ogg；MP4是带有H.264视频编码和AAC音频编码的MP4文件，后缀名为 .mp4；WebM是VP8视频编码和Vorbis音频编码的文件，后缀名为 .webm。
这个Opera浏览器呢，它可以支持ogg，但不支持mp4。由于Opera支持video标签，故video标签之间的文本信息没有显示出来，但它不支持ogg，所以就不进行播放，最终导致页面出现一片空白。这下可怎么办呢？
其实办法有的是，我们可以从网上下载一副图像，放到视频播放窗口，如果视频无法播放，就显示这张图片，是不是更好呢？从网上下载一张美女图片，干脆叫beauty.jpg吧。那这个图像怎么添加到视频窗口呢？
video标签有个poster 属性，就是专门在视频窗口放置图片的。poster是一个video的占位符，无论什么情况下，只要视频还没有播放（视频下载过程中、视频不存在、不支持该视频类型、用户点击播放按钮前），就会显示该图像，可以看做是视频播放之前插入的宣传画或海报。
<video src="media/vedio.mp4" poster = "img/beauty.jpg">
你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！
</video>
在Opera浏览器上刷新一下，真的有一个美女冲着自己微笑呢。虽然视频没有播放出来，这回心情却是好多了。
那我可不能一天到晚只看美女呀，视频还是还是要想办法播放出来的。既然Opera浏览器不支持mp4，我们就换成需要ogg吧，这样就肯定没问题了。
我想了想，这个办法不好，万一某个浏览器只支持支持ogg，不支持mp4呢。这年头，什么都缺，就是不缺点子，随便在网上一搜，办法就有了。
在 video 元素中添加 source 元素，就可以解决这个问题。在source 元素中，通过 src 属性指定视频的地址，通过 type 属性指定视频的类型，以帮助浏览器决定是否能播放该视频。并且，在 video 元素中可以添加任意多个source 元素，让不同的 source 元素链接到不同的视频文件。
这样的话，当浏览器发现 video 元素时，首先会查看它本身是否定义了 src 属性。如果没有，就会检查 source 元素。浏览器会逐个查看这些视频源，直到找到一个可以播放的视频。一旦找到，就会播放它并忽略其他的视频源。我们干脆添加两个source，一个是mp4，一个是ogg，这下视频是一定能播放出来了。
<video poster = "img/beauty.jpg">
<source src="media/vedio.mp4" type="video/mp4">
<source src="media/vedio.ogg" type="video/ogg">
你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！
</video>
在Opera浏览器上又刷新一下，只有美女冲着我微笑，视频还是没播放出来。唉，太粗心了，忘记添加播放视频的控件了。
在video标签中，通过添加controls 属性来为视频添加播放控件，方便用户执行播放、暂停操作和音量控制。
<video poster = "img/beauty.jpg" controls>
（此处略去500字…）
</video>
在Opera浏览器上又刷新一下，效果真的不一样，这次不仅看到美女，还看到了视频控件。用鼠标猛戳一下那个播放按钮，哈哈，不错，真的听到美妙的旋律。我们的ogg文件，终于播放出来了，让我们好好享受一下吧O(∩_∩)O。
听了一会，忽然一想，不对呀，我刚才点了播放按钮后，等了半天才听到声音。能不能我一点播放按钮，就立即播放呢？
原来视频也是需要下载缓存的，点击播放按钮后，首先缓存，然后才播放的。那能不能在页面加载的同时就缓存呢。这样，用户点击播放后，就不必等待了。
这当然可以，在video标签中，通过添加preload属性来为视频添加预加载功能，在页面加载的同时加载视频。
<video poster = "img/beauty.jpg" controls preload>
（此处略去500字…）
</video>
关于 preload 属性，稍微再啰嗦一点，就是可以把它设置为 metadata，让浏览器仅仅预加载视频的基本信息，如尺寸、时长、以及一些关键的帧。这样的话，在开始播放之前，浏览器可以提前计算视频的显示尺寸。
既然一切都OK了！让我们看看mp4是不是能正常播放。下载最新版的Google Chrome 38.0浏览器，打开网页，猛戳一下播放按钮。
等等~，等等~，不对，怎么只有声音没有画面，明明是mp4格式的文件呀？使用暴风影音试了一下，是有画面的呀！
辛辛苦苦又在网上搜了一番，花了整整586秒，终于找到了答案。mp4视频需要h.264编码格式才会有图像的。
找了一个 h.264 编码格式的 mp4 试了一下，不错，确实有图像了！看了半天，原来是一部老外的电影，叽里咕噜一阵，一句话也没听懂。那O(∩_∩)O~，能否提供中文字幕呢，这样就不必费老大劲去听了！
HTML5中，通过在video元素添加track元素为视频添加字幕。字幕文件有两种格式：WebVTT和TTML。WebVTT是Web视频文本轨迹（Web Video Text Track），是UTF-8编码格式的文本文件；TTML是时序文本标记语言（Timed Text Markup Language），是XML格式的文件。两种文件的具体格式，已经超出我们的讨论范围。
video元素支持添加多个track元素，不同的track元素链接到不同的字幕文件。用户可以在各个字幕间进行切换。
<video poster = "img/beauty.jpg" controls preload>
<track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="cn_track.vtt" kind="captions" srclang="zh" label="简体中文">
</video>
track元素中，src属性指定字幕文件的URL；srclang属性字幕文件的语言类型，若kind 属性值是 "subtitles" 时，该属性必需的；label 属性指定字幕标签，每个字幕元素必需设置一个唯一不重复的标签，切换字幕时，会显示标签的名称；kind指定字幕内容类型，只能是subtitles、captions、descriptions、chapters、metadata 之一；default属性指定是否是默认字幕，如果一个都没指定，将不会自动显示字幕。
除了字幕外，我还希望对视频进行过多的控制，比如让视频自动播放、循环播放、默认静音，以及视频窗口的尺寸等等，这些都能做到吗？
这已经不是什么事了，video 元素已经提供了相关属性，根据需要设置相应的属性就可以了。这些属性及含义见表 23：
HTML中嵌入视频和音频代码
哦，原来这么简单呀！那就到此为止吧，网页中嵌入视频的全部代码都在这里，就打包给你吧！
<video width="300" poster="img/beauty.jpg" controls preload autoplay loop muted>
<source src="media/vedio.mp4">
<source src="media/vedio.ogg">
<track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="cn_track.vtt" kind="captions" srclang="zh" label="简体中文">
你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！
</video>
睁大眼睛一看，却只有7行代码。然而，就这区区7行代码，可把他折磨得够呛。
看着这一切都全部搞定，他仰望着天空，长长呼了一口气，显得是那么的放松，那么的惬意。此时，他闭上眼睛，在自己的梦幻世界里遨游！
有了在网页中嵌入视频的经历，要在网页中嵌入音频，那简直就是小菜一碟了。只要把vedio元素换成 audio 元素，就全部搞定。
但需要了解的是，audio 所支持的音频格式只有Ogg Vorbis、mp3 和 wav。还要知道，由于音频没有画面，也就没有 width、height、poster 属性，而其他属性都支持，并且跟视频的含义相同。
网页中嵌入音频的代码如下：
<audio controls preload autoplay loop muted>
<source src="media/audio.mp3">
<source src="media/audio.wav">
<source src="media/audio.ogg">
你的浏览器已经老掉牙了，不支持audio，还不赶快使用现代浏览器O(∩_∩)O~！
</audio>
篇介绍了前端入门——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 表格的使用
家好
这里是有新媒之声给大家带来的html5教程
话不多说直接看效果图
首先我们先创建一个html
我们再建一个存放视频背景的文件夹video
我们给建好的html写入基本代码
然后我们再把作为背景网站的视频拷贝到video这个文件夹下
我们在给刚刚建好的html写入视频代码
效果如下
并未网页全屏，而且视频重复播放
别急现在我们给视频添加样式，使它成为名副其实的视频背景
我们给视频代码写一个class="index-video"
我们在head头写上css样式
我们现在再来看看效果
现在网页视频是以全屏播放并且你可以在上面写上其它的效果，比如说导航栏之类的，因为现在视频已经成为了我们网页的背景。
现在我们在head加上跳转代码
现在就让我们回顾一下需要用到那些代码和注意的要去
body体里
<body>
<!--autoplay 属性设置或返回音视频是否在加载后即开始播放-->
<!--true - 指示音视频在加载完成后随即播放-->
<!--false - 默认。指示音视频不应在加载后立即播放。-->
<!--loop:意思是否在网页里加入背景音乐-->
<!--loop=-1就是表示你的背景音乐的循环次数是无限次，直到你关闭网页-->
<video class="index-video" src="video/logo.mp4" autoplay="true" loop="-1"></video>
</body>
css样式
<style type="text/css">
.index-video {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
</style>
跳转代码
<!--http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。-->
<!--meat标签的http-equiv属性语法格式是：＜meta http-equiv="参数" content="为跳转时间+跳转网址"content="8;url=http://www.baidu.com"＞//为八秒后跳转到百度网站-->
<meta http-equiv="refresh" content="8;url=http://www.baidu.com" />
<meta charset="utf-8">//网站编码utf-8为通用的国际代码
<meta http-equiv="refresh" content="8;url=http://www.baidu.com" />
//<!--meat标签的http-equiv属性语法格式是：＜meta http-equiv="参数" content="为跳转时间+跳转网址"content="8;url=http://www.baidu.com"＞//为八秒后跳转到百度网站-->
<title>炫酷跳转演示站</title>//为网页标题
position 属性规定元素的定位类型。
position语法：
position : static absolute relative
position参数：
static : 无特殊定位，对象遵循HTML定位规则
absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
position说明：
设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确。
min-width: 最小宽度; min-height: 最小高度;
width: auto;//宽度为自动
height: auto;//高度为自动
z-index: -100;
//当你定义的CSS中有position属性值为absolute、relative或fixed，
用z-index此取值方可生效。
此属性参数值越大，则被层叠在最上面。
完整代码
*请认真填写需求信息，我们会在24小时内与您取得联系。
