《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.hqwc.cn/news/439150.html

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

相关文章

盒子模型的内容总结

盒子模型的内容总结

知识引入 1.认识盒子模型 在浏览网站时我们会发现内容都是按照区域划分的。这使得网页很工整、美观。在页面中&#xff0c;每一块区域分别承载不同的内容&#xff0c;使得网页的内容虽然零散&#xff0c;但是在版式排列上依然清晰有条理。如图1 图1 *承载内容的区域称为盒子…
阅读更多...
RabbitMQ常见生产问题详解

RabbitMQ常见生产问题详解

目录 RabbitMQ如何保证消息不丢失&#xff1f; 哪些环节会有丢消息的可能&#xff1f; RabbitMQ消息零丢失方案 1. 生产者保证消息正确发送到RibbitMQ 2. RabbitMQ消息存盘不丢消息 3. RabbitMQ 主从消息同步时不丢消息 4. RabbitMQ消费者不丢失消息 如何保证消息幂等&…
阅读更多...
kubernetes-快速部署一套k8s集群

kubernetes-快速部署一套k8s集群

1、前置知识点 1.1 生产环境可部署Kubernetes集群的两种方式 目前生产部署Kubernetes集群主要有两种方式&#xff1a; kubeadm Kubeadm是一个K8s部署工具&#xff0c;提供kubeadm init和kubeadm join&#xff0c;用于快速部署Kubernetes集群。 二进制包 从github下载发行…
阅读更多...
高端车规MCU的破局之路

高端车规MCU的破局之路

目录 1 低质量的无效内卷 2 高端车规MCU产品共性 2.1 支持标定测量 2.2 低延迟通信加速 2.3 完备的网络安全解决方案 2.4虚拟化 3 国产替代的囚徒困境 1 低质量的无效内卷 近几年&#xff0c;车规MCU国产替代的呼声此消彼长&#xff0c;但仍然集中在低端产品。 从产…
阅读更多...
静态分析Golang语言生成函数调用关系的利器——go-callvis

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

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

蓝桥杯AT24C02问题记录

问题1&#xff1a;从这个图片上可以看出这两个在IIC的.c文件里延时时间不一样&#xff0c;第一张图使用了15个_nop_(); 12M晶振机器周期是 1/12M*121uS&#xff1b;nop()要延时1个指令周期。延时时间不对会对时序产生影响&#xff0c;时序不对&#xff0c;则AT24C02有没被使用…
阅读更多...
C语言KR圣经笔记 5.12 复杂声明

C语言KR圣经笔记 5.12 复杂声明

5.12 复杂声明 C 语言有时会因为声明的语法而受到谴责&#xff0c;特别是涉及函数指针的声明语法。语法试图使声明和使用一致&#xff1b;在简单的情况下它的效果不错&#xff0c;但在更复杂的情况下会让人困惑&#xff0c;因为声明不能从左往右读&#xff0c;而且括号被过度使…
阅读更多...
【Linux网络编程】网络编程套接字(1)

【Linux网络编程】网络编程套接字(1)

【Linux网络编程】网络编程套接字(1) 目录 【Linux网络编程】网络编程套接字(1)源IP地址和目的IP地址端口号端口号和进程ID的关系 网络通信TCP协议UDP协议网络字节序socket编程接口简单的UDP网络程序 作者&#xff1a;爱写代码的刚子 时间&#xff1a;2024.1.29 前言&#xff1…
阅读更多...
Go语言中HTTP代理的请求和响应过程

Go语言中HTTP代理的请求和响应过程

在Go语言中&#xff0c;HTTP代理的实现涉及对请求和响应的拦截、转发和处理。下面将详细介绍这个过程。 请求过程&#xff1a; 客户端发起请求&#xff1a;客户端&#xff08;例如浏览器或其他应用程序&#xff09;发送HTTP请求到代理服务器。建立连接&#xff1a;代理服务器…
阅读更多...
Git怎样用？（下载到本地，和在本地初始化）

Git怎样用？（下载到本地，和在本地初始化）

全局设置&#xff1a; 点击第二个 输入&#xff1a; 例如&#xff1b;邮箱是随意地 git config --global user.name "名字" git config --global user.email "邮箱" 获取git仓库 本地初始化&#xff1a; 创建仓库 右键第二个 输入 git init 克隆&#…
阅读更多...
nssctf round17

nssctf round17

level1 基础共模攻击 # #真签到题 # from Crypto.Util.number import bytes_to_long, getPrime # from secret import getflag # # e1 getPrime(1024) # e2 getPrime(1024) # n e1 * e2 # m bytes_to_long(getflag().encode()) # c1 pow(m, e1, n) # c2 pow(m, e2, n) …
阅读更多...
血细胞分类项目

血细胞分类项目

血细胞分类项目 数据集&#xff1a;血细胞分类数据集数据处理 dataset.py网络 net.py训练 train.py拿训练集的几张图进行预测 数据集&#xff1a;血细胞分类数据集 https://aistudio.baidu.com/datasetdetail/10278 数据处理 dataset.py from torchvision import transfor…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023