数字时代,多媒体元素如视频、音频、图片和动画成为了网页设计中不可或缺的一部分。它们不仅能够提升用户体验,还能有效地传达信息和情感。在本文中,我们将探讨如何在网页中嵌入各种多媒体元素,并提供一些例子来说明如何使用它们。
图片是最常见的多媒体类型之一。在HTML中,我们使用 <img> 标签来嵌入图片。
<img src="example.jpg" alt="描述性文字" width="500" height="300">
在这个例子中,src 属性指定图片的路径,alt 属性提供图片的替代文本(对于视觉障碍用户和图片无法加载的情况非常有用),width 和 height 属性指定图片的尺寸。
视频可以提供动态的视觉体验和信息。HTML5引入了 <video> 标签,使得嵌入视频变得简单。
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持视频标签。
</video>
在这个例子中,controls 属性添加了视频播放控件,如播放、暂停和音量控制。<source> 标签允许指定多个视频格式,以确保跨不同浏览器的兼容性。
音频元素可以用来播放声音或音乐。HTML5通过 <audio> 标签提供了对音频内容的支持。
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
您的浏览器不支持音频元素。
</audio>
与视频标签类似,controls 属性为音频文件提供了基本的控制选项,而 <source> 标签让我们可以指定多个音频格式。
除了直接嵌入文件,我们还可以嵌入整个网页或者其他网站的内容,比如地图或社交媒体帖子。这通常是通过 <iframe> 标签完成的。
<iframe src="https://www.example.com" width="600" height="400">
<p>您的浏览器不支持iframe标签。</p>
</iframe>
在这个例子中,src 属性指定了要嵌入的网页的URL,width 和 height 属性设置了iframe的尺寸。
SVG(可缩放矢量图形)和Canvas API是创建网页动画和图形的两种流行技术。
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
这个SVG示例创建了一个简单的带有绿色边框和黄色填充的圆。
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
这个Canvas示例使用JavaScript在画布上绘制了一个红色的矩形。
我们还可以嵌入社交媒体平台上的内容,如推文或Instagram帖子。
<!-- Twitter -->
<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- Instagram -->
<blockquote class="instagram-media" data-instgrm-permalink="https://www.instagram.com/p/B1JWcqCgsdH/">
</blockquote>
<script async defer src="//www.instagram.com/embed.js"></script>
这些例子展示了如何嵌入Twitter和Instagram的内容。通常,社交媒体平台提供了易于嵌入内容的代码片段。
嵌入多媒体元素可以极大地提升网站的吸引力和互动性。通过使用HTML的 <img>, <video>, <audio>, <iframe>, <svg> 和 <canvas> 标签,我们可以在网页中添加丰富的视觉和听觉内容。此外,社交媒体的嵌入功能使得分享和展示社交媒体内容变得简单。当设计包含多媒体元素的网页时,记得考虑到所有用户的访问性,确保内容对所有人都是可访问的。
篇介绍了前端入门——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 表格的使用
TML+前端超大视频上传解决方案,网页 项目文件夹上传下载解决方案,
前端用了JS,JQuery,vue2,vue3,vue-cli,html5,html
网上搜了一下,基本上大部分的文章里面提到的前端JS或VUE或HTML5上传文件夹的方案都是使用JS的API来实现的,也就是html5提供的一个API,也就是chrome提供的API。用是能用,但是不够好用,有很多限制,也不够灵活。不太能够满足用户的实际应用需求,
多多少少还是有点问题,稳定性,灵活性,可扩展性,安全性方面还是有点问题。chrome的每个域名只允许5个TCP连接的限制,这个基本上是一个无法逾越的鸿沟,目前为止网上还没有发现哪家公司或者个人能够突破的。
我们做项目的话个人用户比较少,一般都是行业用户,比如政府,公司,金融,这类企业,他们对用户体验要求较高。就实际项目开发和实施的情况来看,html5或者chrome提供的功能基本上都是不能够满足他们需求的,都需要我们进行定制开发。
文件夹上传,html5提供了API,用户开始用的时候还行,然后就提了要求要求支持断点续传,
客户这边是一个政府单位,涉密了,就不透露单位名称了,每天主要就是上传和下载一些资料,数据都是加密的。
客户那边每天都会上传和下载资料,
1.下载示例
https://gitee.com/xproer/up6-vue-cli
将up6组件复制到项目中
示例中已经包含此目录
1.引入up6组件
2.配置接口地址
接口地址分别对应:文件初始化,文件数据上传,文件进度,文件上传完毕,文件删除,文件夹初始化,文件夹删除,文件列表
参考:http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de
3.处理事件
启动测试
启动成功
效果
数据库
源码工程文档:https://drive.weixin.qq.com/s?k=ACoAYgezAAw1dWofra
源码报价单:https://drive.weixin.qq.com/s?k=ACoAYgezAAwoiul8gl
OEM版报价单:https://drive.weixin.qq.com/s?k=ACoAYgezAAwuzp4W0a
控件源码下载:https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc
*请认真填写需求信息,我们会在24小时内与您取得联系。