《HTML 简易速速上手小册》第7章：HTML 多媒体与嵌入内容（2024 最新版）

在这里插入图片描述

文章目录

  • 7.1 在HTML中嵌入视频和音频
    • 7.1.1 基础知识
    • 7.1.2 案例 1：嵌入视频文件
    • 7.1.3 案例 2：嵌入音频文件
    • 7.1.4 案例 3：创建一个视频和音频混合的播放列表
  • 7.2 使用 `<iframe>` 嵌入外部内容
    • 7.2.1 基础知识
    • 7.2.2 案例 1：嵌入地图
    • 7.2.3 案例 2：嵌入视频
    • 7.2.4 案例 3：创建一个包含多个`<iframe>`的网页
  • 7.3 管理和优化多媒体内容
    • 7.3.1 基础知识
    • 7.3.2 案例 1：优化网页图像
    • 7.3.3 案例 2：使用视频流服务
    • 7.3.4 案例 3：懒加载图像

7.1 在HTML中嵌入视频和音频

7.1.1 基础知识

  • 视频和音频标签：HTML5引入了<video>和<audio>标签，让嵌入和播放媒体变得简单。就像在你的网页上安装了一个迷你影院和音乐厅。
  • 属性和格式：这些标签支持多种属性，比如controls、autoplay、loop，以及多种文件格式，确保不同的浏览器能播放你的媒体内容。
  • 源文件：使用<source>标签可以为不同的浏览器提供不同格式的视频和音频文件，保证更广泛的兼容性。

7.1.2 案例 1：嵌入视频文件

让我们开始嵌入一个视频文件。我们将为不同的浏览器提供不同格式的视频，并添加控件以供用户操作。

<!DOCTYPE html>
<html>
<head><title>视频嵌入示例</title>
</head>
<body><video width="320" height="240" controls><source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.</video>
</body>
</html>

7.1.3 案例 2：嵌入音频文件

接下来，我们将在网页中嵌入一个音频文件，并添加一些基本控件。

<!DOCTYPE html>
<html>
<head><title>音频嵌入示例</title>
</head>
<body><audio controls><source src="audio.mp3" type="audio/mpeg"><source src="audio.ogg" type="audio/ogg">Your browser does not support the audio element.</audio>
</body>
</html>

7.1.4 案例 3：创建一个视频和音频混合的播放列表

最后，我们来点挑战性的任务：创建一个包含视频和音频的播放列表，让用户可以从列表中选择他们想看或听的内容。

<!DOCTYPE html>
<html>
<head><title>混合播放列表</title>
</head>
<body><h1>我的播放列表</h1><video id="mediaPlayer" width="320" height="240" controls><source src="movie.mp4" type="video/mp4">Your browser does not support the video tag.</video><audio id="mediaPlayer" controls><source src="audio.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio><ul><li onclick="playMedia('movie.mp4', 'video/mp4')">视频 1</li><li onclick="playMedia('movie2.mp4', 'video/mp4')">视频 2</li><li onclick="playMedia('audio.mp3', 'audio/mpeg')">音频 1</li></ul><script>function playMedia(file, type) {var player = document.getElementById('mediaPlayer');player.src = file;player.type = type;player.load();player.play();}</script>
</body>
</html>

通过这些案例，你将能够掌握在网页中嵌入和控制视频及音频的基础技能。从简单的嵌入到创建播放列表，这些知识让你的网站变得更加生动有趣，仿佛赋予了它生命。记住，视觉和听觉的结合可以极大地提升用户体验，所以尽情地利用这些工具吧！

在这里插入图片描述

7.2 使用 <iframe> 嵌入外部内容

7.2.1 基础知识

  • <iframe>简介：<iframe>（内联框架）是一个HTML元素，它允许您在当前HTML页面上嵌入另一个HTML页面。想象一下，在你的网页上有一个小窗口，可以看到另一个网站的内容。
  • 使用场景：<iframe>经常用于嵌入如视频、地图、或者其他网站的页面。它就像是网页中的“迷你视窗”，允许用户在不离开当前页面的情况下浏览其他内容。
  • 属性：<iframe>支持多种属性，包括src（指定嵌入内容的来源）、width和height（设置框架的大小）、frameborder（设置边框的宽度）等。

7.2.2 案例 1：嵌入地图

假设您想在您的网站上嵌入一个地图，以显示某个地点。

<!DOCTYPE html>
<html>
<head><title>嵌入地图示例</title>
</head>
<body><h1>广州天河体育中心</h1><iframewidth="600"height="450"frameborder="0" style="border:0"src="https://map.baidu.com/search/%E5%A4%A9%E6%B2%B3%E4%BD%93%E8%82%B2%E4%B8%AD%E5%BF%83/@12616001.349751737,2632395.62058975,18.43z?querytype=s&da_src=shareurl&wd=%E5%A4%A9%E6%B2%B3%E4%BD%93%E8%82%B2%E4%B8%AD%E5%BF%83&c=257&src=0&wd2=%E5%B9%BF%E5%B7%9E%E5%B8%82%E5%A4%A9%E6%B2%B3%E5%8C%BA&pn=0&sug=1&l=13&b=(12582963,2611508;12664883,2653716)&from=webmap&biz_forward=%7B%22scaler%22:2,%22styles%22:%22pl%22%7D&sug_forward=ef23bc7692da590ff4e73ba4&device_ratio=2"allowfullscreen></iframe>
</body>
</html>

7.2.3 案例 2：嵌入视频

接下来，让我们在网页中嵌入一个YouTube视频。

<!DOCTYPE html>
<html>
<head><title>嵌入视频示例</title>
</head>
<body><h1>观看我们的视频</h1><iframewidth="560"height="315"src="http://t.cn/A6jUEkYB"frameborder="0"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe>
</body>
</html>

7.2.4 案例 3：创建一个包含多个<iframe>的网页

最后，我们来创建一个包含多个<iframe>的网页，比如同时嵌入视频、地图和另一个网站的新闻文章。

<!DOCTYPE html>
<html>
<head><title>多重嵌入示例</title>
</head>
<body><h1>了解更多</h1><iframewidth="560"height="315"src="http://t.cn/A6jUEkYB"frameborder="0"allowfullscreen></iframe><iframewidth="600"height="450"src="https://map.baidu.com/search/%E5%A4%A9%E6%B2%B3%E4%BD%93%E8%82%B2%E4%B8%AD%E5%BF%83/@12616001.349751737,2632395.62058975,18.43z?querytype=s&da_src=shareurl&wd=%E5%A4%A9%E6%B2%B3%E4%BD%93%E8%82%B2%E4%B8%AD%E5%BF%83&c=257&src=0&wd2=%E5%B9%BF%E5%B7%9E%E5%B8%82%E5%A4%A9%E6%B2%B3%E5%8C%BA&pn=0&sug=1&l=13&b=(12582963,2611508;12664883,2653716)&from=webmap&biz_forward=%7B%22scaler%22:2,%22styles%22:%22pl%22%7D&sug_forward=ef23bc7692da590ff4e73ba4&device_ratio=2s"frameborder="0"allowfullscreen></iframe><iframewidth="100%"height="500"src="https://example.com/news-article"frameborder="0"></iframe>
</body>
</html>

通过这些案例，您可以看到<iframe>如何让您在一个网页中方便地展示来自不同来源的内容。使用<iframe>可以大大增强您的网页的功能性和互动性，让用户在访问您的网站时享受更加丰富的体验。
在这里插入图片描述

7.3 管理和优化多媒体内容

7.3.1 基础知识

  • 多媒体内容的挑战：虽然多媒体内容可以让网站更加生动有趣，但它们也可能导致网页加载时间变长，影响用户体验。
  • 优化图像：对于图像，使用正确的格式（如JPEG、PNG、WEBP）和压缩技术可以显著减少文件大小，而不损失太多质量。
  • 视频和音频的优化：对于视频和音频，考虑使用流媒体服务，或者预加载技术来平衡加载时间和播放性能。

7.3.2 案例 1：优化网页图像

假设您的网站有很多高分辨率的图像，我们将通过减少它们的大小来优化加载时间。

<!DOCTYPE html>
<html>
<head><title>图像优化示例</title>
</head>
<body><h1>我的摄影作品</h1><img src="optimized-image1.jpg" alt="优化后的图像1"><img src="optimized-image2.jpg" alt="优化后的图像2"><img src="optimized-image3.jpg" alt="优化后的图像3">
</body>
</html>

在这个示例中，假设optimized-image1.jpg、optimized-image2.jpg和optimized-image3.jpg是原始图像经过压缩和大小调整后的版本。

7.3.3 案例 2：使用视频流服务

让我们嵌入一个视频，但这次我们使用视频流服务，如YouTube或Vimeo，以减少主机服务器的负担。

<!DOCTYPE html>
<html>
<head><title>视频流服务示例</title>
</head>
<body><h1>观看我们的视频</h1><iframewidth="560"height="315"src="http://t.cn/A6jUEkYB"frameborder="0"allowfullscreen></iframe>
</body>
</html>

7.3.4 案例 3：懒加载图像

在这个示例中，我们将应用“懒加载”技术，这意味着图像只会在用户滚动到它们时才加载。

<!DOCTYPE html>
<html>
<head><title>懒加载图像示例</title><script>document.addEventListener("DOMContentLoaded", function() {var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));if ("IntersectionObserver" in window) {let lazyImageObserver = new IntersectionObserver(function(entries, observer) {entries.forEach(function(entry) {if (entry.isIntersecting) {let lazyImage = entry.target;lazyImage.src = lazyImage.dataset.src;lazyImage.classList.remove("lazy");lazyImageObserver.unobserve(lazyImage);}});});lazyImages.forEach(function(lazyImage) {lazyImageObserver.observe(lazyImage);});}});</script>
</head>
<body><h1>浏览我的作品</h1><img class="lazy" data-src="image1.jpg" alt="我的作品1"><img class="lazy" data-src="image2.jpg" alt="我的作品2"><img class="lazy" data-src="image3.jpg" alt="我的作品3">
</body>
</html>

在这些案例中，我们展示了如何优化和管理网站的多媒体内容，确保用户体验不受大文件加载时间的影响。从图像压缩到视频流服务，再到懒加载技术，这些方法都是提高网站性能的有效手段。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/653941.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

四. 基于环视Camera的BEV感知算法-BEVFormer实战

四. 基于环视Camera的BEV感知算法-BEVFormer实战

目录 前言1. BEVFormer实战 前言 自动驾驶之心推出的《国内首个BVE感知全栈系列学习教程》&#xff0c;链接。记录下个人学习笔记&#xff0c;仅供自己参考 本次课程我们来学习下课程第四章——基于环视Camera的BEV感知算法&#xff0c;一起去学习下 BEVFormer 的相关代码 课程…
阅读更多...
Matlab图像平滑滤波学习笔记——卷积、中值滤波、排序滤波以及自适应滤波

Matlab图像平滑滤波学习笔记——卷积、中值滤波、排序滤波以及自适应滤波

1.引言 图像处理是计算机视觉领域中的一个重要分支&#xff0c;其目标是通过对图像进行各种操作来改善图像的质量或提取出特定的信息。在图像处理的诸多任务中&#xff0c;平滑和滤波是常见且关键的操作&#xff0c;用于去除噪声、增强细节或突出图像中的特征。本文将重点介绍…
阅读更多...
探索Viper-适用于GoLang的完整配置解决方案

探索Viper-适用于GoLang的完整配置解决方案

前言 对于现代应用程序&#xff0c;尤其大中型的项目来说&#xff0c;在程序启动和运行时&#xff0c;往往需要传入许多参数来控制程序的行为&#xff0c;我们可以通过命令行参数&#xff0c;环境变量&#xff0c;配置文件等方式来将参数传递给程序。而Viper库为Golang语言开发…
阅读更多...
麒麟系统安装minio_centos8.0安装最新minio_离线安装minio并设置权限_创建桶---minio工作笔记001

麒麟系统安装minio_centos8.0安装最新minio_离线安装minio并设置权限_创建桶---minio工作笔记001

https://www.minio.org.cn/?id=18&id=3&id=0&id=11&id=9&spinz=qianfeng&adinfo678=baidu&spinz=qianfeng&adinfo678=baidu%3E 首先去到官网去下载minio,然后 可以看到已经显示的官网,然后再去,右边点击下载 进入下载页面一般都是amd64的版本…
阅读更多...
【JaveWeb教程】（35）SpringBootWeb案例之《智能学习辅助系统》登录功能的详细实现步骤与代码示例（8）

【JaveWeb教程】（35）SpringBootWeb案例之《智能学习辅助系统》登录功能的详细实现步骤与代码示例（8）

目录 案例-登录和认证1. 登录功能1.1 需求1.2 接口文档1.3 思路分析1.4 功能开发1.5 测试 案例-登录和认证 在前面的课程中&#xff0c;我们已经实现了部门管理、员工管理的基本功能&#xff0c;但是大家会发现&#xff0c;我们并没有登录&#xff0c;就直接访问到了Tlias智能…
阅读更多...
Leetcode3014. 输入单词需要的最少按键次数 I

Leetcode3014. 输入单词需要的最少按键次数 I

Every day a Leetcode 题目来源&#xff1a;3014. 输入单词需要的最少按键次数 I 解法1&#xff1a;统计 统计字符串 word 的小写字母个数和 1、#、*、0 的个数。 将小写字母均匀地分配到 8 个按键上&#xff0c;模拟即可。 代码&#xff1a; /** lc appleetcode.cn id3…
阅读更多...
多维时序 | Matlab实现DBO-LSTM蜣螂算法优化长短期记忆神经网络多变量时间序列预测

多维时序 | Matlab实现DBO-LSTM蜣螂算法优化长短期记忆神经网络多变量时间序列预测

多维时序 | Matlab实现DBO-LSTM蜣螂算法优化长短期记忆神经网络多变量时间序列预测 目录 多维时序 | Matlab实现DBO-LSTM蜣螂算法优化长短期记忆神经网络多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现DBO-LSTM多变量时间序列预测&#x…
阅读更多...
K8s 安装部署-Master和Minion(Node)

K8s 安装部署-Master和Minion(Node)

K8s 安装部署-Master和Minion(Node) 操作系统版本&#xff1a;CentOS 7.4 Master &#xff1a;172.20.26.167 Minion-1&#xff1a;172.20.26.198 Minion-2&#xff1a;172.20.26.210&#xff08;后增加节点&#xff09; ETCD&#xff1a;172.20.27.218 先安装部署ETCD y…
阅读更多...
手机通讯录----Python实例练习

手机通讯录----Python实例练习

问题描述 通讯录是记录了联系人姓名和联系方式的名录&#xff0c;手机通讯录是最常见的通讯录之一&#xff0c;人们可以在通讯录中通过姓名查看相关联系人的联系方式、邮箱、地址等信息&#xff0c;也可以在其中新增联系人&#xff0c;或修改、删除联系人信息。下面是一个常见…
阅读更多...
静态分析Golang语言生成函数调用关系的利器——go-callvis

静态分析Golang语言生成函数调用关系的利器——go-callvis

目录 升级go删除旧版本安装新版本配置环境变量载入环境修改当前环境修改之后进入的环境 分析安装go-callvis分析其他包总结 导出文件总结 清晰主体脉络总结 其他 参考资料 不同于之前分析C语言项目的工具&#xff0c;go-callvis还是很方便使用。只要把两项工作做好就能顺利的使…
阅读更多...
图像处理------调整色调

图像处理------调整色调

什么是色调&#xff1f; 色调&#xff0c;在画面上表现思想、感情所使用的色彩和色彩的浓淡。分为暖色调和冷色调。 from cv2 import destroyAllWindows, imread, imshow, waitKey#创建棕褐色色调 def make_sepia(img, factor: int):pixel_h, pixel_v img.shape[0], img.shap…
阅读更多...
如何使用Docker部署WBO白板并实现公网地址远程访问

如何使用Docker部署WBO白板并实现公网地址远程访问

本文主要是如何使用Docker部署WBO白板并实现公网地址远程访问的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是青衿&#x1f947; ☁️博客首页&#xff1a;CSDN主页放风讲故事 &#x1f304;每日一句&am…
阅读更多...
【C/C++】C/C++编程——变量和常量

【C/C++】C/C++编程——变量和常量

文章目录 变量变量的声明变量命名规则变量的类型 常量常量的定义与初始化字面量常量整型常量浮点型常量字符常量常量表达式&#xff08;constexpr&#xff09; 大家好&#xff0c;我是 shopeeai&#xff0c;也可以叫我虾皮&#xff0c;中科大菜鸟研究生。今天我们来一起来学习C…
阅读更多...
C++初阶：C/C++内存管理、new与delete详解

C++初阶：C/C++内存管理、new与delete详解

之前结束了类与对象&#xff1a;今天进行下面部分内容的学习 文章目录 1.C/C内存分布2.C语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free3.C动态内存管理方式3.1new/delete操作内置类型3.2new和delete操作自定义类型 4.operator new与operator delete函数5.new和…
阅读更多...
C#，数据检索算法之三元搜索（Ternary Search）的源代码

C#，数据检索算法之三元搜索（Ternary Search）的源代码

数据检索算法是指从数据集合&#xff08;数组、表、哈希表等&#xff09;中检索指定的数据项。 数据检索算法是所有算法的基础算法之一。 本文发布 三元搜索&#xff08;Ternary Search&#xff09;的源代码。 1 文本格式 using System; namespace Legalsoft.Truffer.Algo…
阅读更多...
SpringMvc切换Json转换工具

SpringMvc切换Json转换工具

SpringBoot切换使用goolge的Gson作为SpringMvc的Json转换工具 <!-- gson依赖 --> <dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId> </dependency>Configuration public class JsonWebConfig {B…
阅读更多...
Python拼接字符串

Python拼接字符串

在Python编程中&#xff0c;字符串拼接是一项常见的操作&#xff0c;它可以用于将多个字符串连接起来形成一个新的字符串&#xff0c;是处理文本数据和字符串操作的基本技巧之一。 1. 使用""运算符进行字符串拼接 最常见的字符串拼接方法是使用""运算符&…
阅读更多...
多维时序 | Matlab实现DBO-GRU蜣螂算法优化门控循环单元多变量时间序列预测

多维时序 | Matlab实现DBO-GRU蜣螂算法优化门控循环单元多变量时间序列预测

多维时序 | Matlab实现DBO-GRU蜣螂算法优化门控循环单元多变量时间序列预测 目录 多维时序 | Matlab实现DBO-GRU蜣螂算法优化门控循环单元多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现DBO-GRU蜣螂算法优化门控循环单元多变量时间序列预…
阅读更多...
专业130+总分390+第二名中国海洋大学946信号与系统考研经验电子信息通信

专业130+总分390+第二名中国海洋大学946信号与系统考研经验电子信息通信

今年专业946信号与系统130&#xff0c;总分390&#xff0c;专业排名第2顺利上岸中国海洋大学&#xff0c;总结一下自己的复习经验希望对大家复习有所帮助&#xff0c;每个人的学习习惯不同&#xff0c;大家要对自己有信心&#xff0c;借鉴加上自己整合&#xff0c;属于自己的才…
阅读更多...
第十篇【传奇开心果系列】BeeWare开发移动应用示例：优质跨平台解决方案

第十篇【传奇开心果系列】BeeWare开发移动应用示例：优质跨平台解决方案

传奇开心果博文系列 系列博文目录BeeWare开发移动应用示例系列博文目录前言一、Beeware优质跨平台实现方案三、跨平台能力示例代码和说明四、原生用户界面示例代码和说明五、强大生态系统示例代码和说明六、灵活的部署选项示例代码和说明七、归纳总结系列博文目录 BeeWare开发…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023