《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.rhkb.cn/news/247983.html

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

相关文章

超越传统—Clean架构打造现代Android架构指南

超越传统—Clean架构打造现代Android架构指南

超越传统—Clean架构打造现代Android架构指南 1. 引言 在过去几年里&#xff0c;Android应用开发经历了巨大的变革和发展。随着移动设备的普及和用户对应用的期望不断提高&#xff0c;开发人员面临着更多的挑战和需求。传统的Android架构在应对这些挑战和需求时显得有些力不从…
阅读更多...
除了Adobe之外，还有什么方法可以将Excel转为PDF？

除了Adobe之外，还有什么方法可以将Excel转为PDF？

前言 Java是一种广泛使用的编程语言&#xff0c;它在企业级应用开发中发挥着重要作用。而在实际的开发过程中&#xff0c;我们常常需要处理各种数据格式转换的需求。今天小编为大家介绍下如何使用葡萄城公司的的Java API 组件GrapeCity Documents for Excel&#xff08;以下简…
阅读更多...
Docker 安装篇（CentOS）

Docker 安装篇（CentOS）

Docker社区版 Docker从1.13版本之后采用时间线的方式作为版本号&#xff0c;分为社区版CE和企业版EE。 社区版是免费提供给个人开发者和小型团体使用的&#xff0c;企业版会提供额外的收费服务&#xff0c;比如经过官方测试认证过的基础设施、容器、插件等。 1、Docker 要求 C…
阅读更多...
研发日记，Matlab/Simulink避坑指南(五)——CAN解包 DLC Bug

研发日记，Matlab/Simulink避坑指南(五)——CAN解包 DLC Bug

文章目录 前言 背景介绍 问题描述 分析排查 解决方案 总结 前言 见《研发日记&#xff0c;Matlab/Simulink避坑指南&#xff08;一&#xff09;——Data Store Memory模块执行时序Bug》 见《研发日记&#xff0c;Matlab/Simulink避坑指南(二)——非对称数据溢出Bug》 见《…
阅读更多...
Activity创建与跳转

Activity创建与跳转

快捷&#xff0c;一下创建三个 跳转
阅读更多...
《HTML 简易速速上手小册》第1章：HTML 入门（2024 最新版）

《HTML 简易速速上手小册》第1章：HTML 入门（2024 最新版）

文章目录 1.1 HTML 简介与历史&#xff08;&#x1f609;&#x1f310;&#x1f47d;踏上神奇的网页编程之旅&#xff09;1.1.1 从过去到现在的华丽蜕变1.1.2 市场需求 —— HTML的黄金时代1.1.3 企业中的实际应用 —— 不只是个网页1.1.4 职业前景 —— 未来属于你 1.2 基本 H…
阅读更多...
文献速递：人工智能医学影像分割--- 深度学习分割骨盆骨骼：大规模CT数据集和基线模型

文献速递：人工智能医学影像分割--- 深度学习分割骨盆骨骼：大规模CT数据集和基线模型

文献速递&#xff1a;人工智能医学影像分割— 深度学习分割骨盆骨骼&#xff1a;大规模CT数据集和基线模型 我们为大家带来人工智能技术在医学影像分割上的应用文献。 人工智能在医学影像分析中发挥着至关重要的作用&#xff0c;尤其体现在图像分割技术上。这项技术的目的是准…
阅读更多...
Django配置websocket时的错误解决

Django配置websocket时的错误解决

基于移动群智感知的网络图谱构建系统需要手机app不断上传数据到服务器并把数据推到前端标记在百度地图上&#xff0c;由于众多手机向同一服务器发送数据&#xff0c;如果使用长轮询&#xff0c;则实时性差、延迟高且服务器的负载过大&#xff0c;而使用websocket则有更好的性能…
阅读更多...
iOS 17.4 苹果公司正在加倍投入人工智能

iOS 17.4 苹果公司正在加倍投入人工智能

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
组件冲突、data函数、组件通信

组件冲突、data函数、组件通信

文章目录 1.组件的三大组成部分 - 注意点说明2.组件的样式冲突&#xff08;用 scoped 解决&#xff09;3.data是一个函数4.组件通信1.什么是组件通信&#xff1f;2.不同的组件关系 和 组件通信方案分类 5.prop详解prop 校验①类型校验②完整写法&#xff08;类型&#xff0c;非…
阅读更多...
Windows系统安装OpenSSH+VS Code结合内网穿透实现远程开发

Windows系统安装OpenSSH+VS Code结合内网穿透实现远程开发

文章目录 前言1、安装OpenSSH2、vscode配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网地址远程 前言 远程…
阅读更多...
计算机毕业设计 | SpringBoot 求职招聘管理系统(附源码)

计算机毕业设计 | SpringBoot 求职招聘管理系统(附源码)

1&#xff0c;绪论 1.1 开发背景 高学历人群是网络求职者的主体&#xff0c;且结构趋向固定。而在疫情肆虐的今日&#xff0c;线上招聘成了越来越多企业和个人选择的方式。在疫情期间线下招聘转为线上招聘&#xff0c;是疫情防控的需要。不能否定的是新的招聘模式的出现一定会…
阅读更多...
IS-IS：04 DIS

IS-IS：04 DIS

IS-IS 协议只支持两种网络类型&#xff0c;即广播网络和点到点网络。与 OSPF 协议相同&#xff0c; IS-IS 协议在广播网络中会将网络视为一个伪节点 &#xff08; Pesudonde&#xff0c;简称 PSN&#xff09;&#xff0c;并选举出一台DIS &#xff08;Designated IS&#xff09…
阅读更多...
【SVD生成视频+可本地部署】ComfyUI使用（二）——使用Stable Video Diffusion生成视频 （2023.11开源）

【SVD生成视频+可本地部署】ComfyUI使用（二）——使用Stable Video Diffusion生成视频 （2023.11开源）

SVD官方主页 &#xff1a; Huggingface | | Stability.ai || 论文地址 huggingface在线运行demo : https://huggingface.co/spaces/multimodalart/stable-video-diffusion SVD开源代码&#xff1a;Github&#xff08;含其他项目&#xff09; || Huggingface 在Comfyui使用&…
阅读更多...
力扣72. 编辑距离

力扣72. 编辑距离

动态规划 思路&#xff1a; 假设 dp[i][j] 是 word1 长度 i 和 word2 长度 j 的编辑距离&#xff1b;有三种编辑方式&#xff1a;插入、删除、替换&#xff0c;即 word1 插入、word2 插入、替换&#xff1b;那么 dp[i][j] 可以是&#xff1a; dp[i - 1][j] 在 word1 中插入一个…
阅读更多...
数据结构----链表介绍、模拟实现链表、链表的使用

数据结构----链表介绍、模拟实现链表、链表的使用

文章目录 1. ArrayList存在的问题2. 链表定义2.1 链表的概念及结构2.2 链表的组合类型 3. 链表的实现3.1 单向、不带头、非循环链表的实现3.2 双向、不带头节点、非循环链表的实现 4.LinkedList的使用4.1 什么是LinkedList4.2 LinkedList的使用4.2.1. LinkedList的构造4.2.2. L…
阅读更多...
基于Java SSM框架实现药品销售系统项目【项目源码+论文说明】

基于Java SSM框架实现药品销售系统项目【项目源码+论文说明】

基于java的SSM框架实现药品销售系统演示 摘要 本论文主要论述了如何使用JAVA语言开发一个药品销售系统 &#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述药品销…
阅读更多...
【Node.js】fs与path模块的基础使用

【Node.js】fs与path模块的基础使用

文章目录 前言一、什么叫做模块二、fs模块2.1 fs模块是干什么的&#xff1f;2.2 fs模块的使用导入fs模块读取文件的内容写入文件内容处理路径问题path路径模块 总结 前言 在Node.js中&#xff0c;fs模块&#xff08;文件系统模块&#xff09;是一个重要的核心模块&#xff0c;…
阅读更多...
软件设计师——软件工程（五）

软件设计师——软件工程（五）

&#x1f4d1;前言 本文主要是【软件工程】——软件设计师——软件工程的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304…
阅读更多...
如何在群晖NAS部署office服务实现多人远程协同办公编辑文档

如何在群晖NAS部署office服务实现多人远程协同办公编辑文档

文章目录 本教程解决的问题是&#xff1a;1. 本地环境配置2. 制作本地分享链接3. 制作公网访问链接4. 公网ip地址访问您的分享相册5. 制作固定公网访问链接 本教程解决的问题是&#xff1a; 1.Word&#xff0c;PPT&#xff0c;Excel等重要文件存在本地环境&#xff0c;如何在编…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发