篇介绍了前端入门——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此取值方可生效。
此属性参数值越大,则被层叠在最上面。
完整代码
天小编与大家分享一个下载B站视频的
网址
相信大家很多人都是B站的粉丝
二次元
鬼畜视频等等
但是现在
B站也逐渐成为一个学习的网站
各种各样的学习资源
应有尽有
无所不有
如果碰到自己喜欢的视频还是下载下来吧,虽然缓存也是一个不错的选择,但是万一哪一天找不到视频了,下载视频还是最稳妥的选择
上图是软件安装的界面,我们上图中就能看出来软件的风格
由于是安装在D盘,我们也不需要去改变其中的设置,只需要点击开始安装即可,稍后我们选择安装完毕,点击打开
整体而言,软件安装过程还是比较简单的,我们按照上面的步骤仔细安装即可
打开软件之后,我们就可以发现软件小清新的界面,我们这个时候只需要复制我们想要下载视频的链接到上面即可,软件会自动视频我们复制的链接,我们我们只需要轻轻敲下回车键,这样我们就可以找到我们需要下载的视频
上图中我们也可以自由选择我们需要的视频清晰度,我们可以选择1080、480不同种类的清晰度,我们可以选择1080最清晰的即可
当然我们也可以单单选择音频文件进行下载,还有XML的弹幕文件
上图就是我们下载的过程,下载完成之后,右下角就会出现下载成功的提示,我们按照提示打开文件夹即可,这样整个下载过程就算完成了
微信公众号:灿哥工作室 后台回复:B站视频下载
*请认真填写需求信息,我们会在24小时内与您取得联系。