网站会员体系,带dede后台的整套网站源码 怎么进入dede后台,wordpress框架解密,wordpress 好慢哪文章目录 7.1 在HTML中嵌入视频和音频7.1.1 基础知识7.1.2 案例 1#xff1a;嵌入视频文件7.1.3 案例 2#xff1a;嵌入音频文件7.1.4 案例 3#xff1a;创建一个视频和音频混合的播放列表 7.2 使用 iframe 嵌入外部内容7.2.1 基础知识7.2.2 案例 1#xff1a;嵌入… 文章目录 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
headtitle视频嵌入示例/title
/head
bodyvideo width320 height240 controlssource srcmovie.mp4 typevideo/mp4source srcmovie.ogg typevideo/oggYour browser does not support the video tag./video
/body
/html7.1.3 案例 2嵌入音频文件
接下来我们将在网页中嵌入一个音频文件并添加一些基本控件。
!DOCTYPE html
html
headtitle音频嵌入示例/title
/head
bodyaudio controlssource srcaudio.mp3 typeaudio/mpegsource srcaudio.ogg typeaudio/oggYour browser does not support the audio element./audio
/body
/html7.1.4 案例 3创建一个视频和音频混合的播放列表
最后我们来点挑战性的任务创建一个包含视频和音频的播放列表让用户可以从列表中选择他们想看或听的内容。
!DOCTYPE html
html
headtitle混合播放列表/title
/head
bodyh1我的播放列表/h1video idmediaPlayer width320 height240 controlssource srcmovie.mp4 typevideo/mp4Your browser does not support the video tag./videoaudio idmediaPlayer controlssource srcaudio.mp3 typeaudio/mpegYour browser does not support the audio element./audioulli onclickplayMedia(movie.mp4, video/mp4)视频 1/lili onclickplayMedia(movie2.mp4, video/mp4)视频 2/lili onclickplayMedia(audio.mp3, audio/mpeg)音频 1/li/ulscriptfunction 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
headtitle嵌入地图示例/title
/head
bodyh1广州天河体育中心/h1iframewidth600height450frameborder0 styleborder:0srchttps://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?querytypesda_srcshareurlwd%E5%A4%A9%E6%B2%B3%E4%BD%93%E8%82%B2%E4%B8%AD%E5%BF%83c257src0wd2%E5%B9%BF%E5%B7%9E%E5%B8%82%E5%A4%A9%E6%B2%B3%E5%8C%BApn0sug1l13b(12582963,2611508;12664883,2653716)fromwebmapbiz_forward%7B%22scaler%22:2,%22styles%22:%22pl%22%7Dsug_forwardef23bc7692da590ff4e73ba4device_ratio2allowfullscreen/iframe
/body
/html7.2.3 案例 2嵌入视频
接下来让我们在网页中嵌入一个YouTube视频。
!DOCTYPE html
html
headtitle嵌入视频示例/title
/head
bodyh1观看我们的视频/h1iframewidth560height315srchttp://t.cn/A6jUEkYBframeborder0allowaccelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-pictureallowfullscreen/iframe
/body
/html7.2.4 案例 3创建一个包含多个iframe的网页
最后我们来创建一个包含多个iframe的网页比如同时嵌入视频、地图和另一个网站的新闻文章。
!DOCTYPE html
html
headtitle多重嵌入示例/title
/head
bodyh1了解更多/h1iframewidth560height315srchttp://t.cn/A6jUEkYBframeborder0allowfullscreen/iframeiframewidth600height450srchttps://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?querytypesda_srcshareurlwd%E5%A4%A9%E6%B2%B3%E4%BD%93%E8%82%B2%E4%B8%AD%E5%BF%83c257src0wd2%E5%B9%BF%E5%B7%9E%E5%B8%82%E5%A4%A9%E6%B2%B3%E5%8C%BApn0sug1l13b(12582963,2611508;12664883,2653716)fromwebmapbiz_forward%7B%22scaler%22:2,%22styles%22:%22pl%22%7Dsug_forwardef23bc7692da590ff4e73ba4device_ratio2sframeborder0allowfullscreen/iframeiframewidth100%height500srchttps://example.com/news-articleframeborder0/iframe
/body
/html通过这些案例您可以看到iframe如何让您在一个网页中方便地展示来自不同来源的内容。使用iframe可以大大增强您的网页的功能性和互动性让用户在访问您的网站时享受更加丰富的体验。 7.3 管理和优化多媒体内容
7.3.1 基础知识
多媒体内容的挑战虽然多媒体内容可以让网站更加生动有趣但它们也可能导致网页加载时间变长影响用户体验。优化图像对于图像使用正确的格式如JPEG、PNG、WEBP和压缩技术可以显著减少文件大小而不损失太多质量。视频和音频的优化对于视频和音频考虑使用流媒体服务或者预加载技术来平衡加载时间和播放性能。
7.3.2 案例 1优化网页图像
假设您的网站有很多高分辨率的图像我们将通过减少它们的大小来优化加载时间。
!DOCTYPE html
html
headtitle图像优化示例/title
/head
bodyh1我的摄影作品/h1img srcoptimized-image1.jpg alt优化后的图像1img srcoptimized-image2.jpg alt优化后的图像2img srcoptimized-image3.jpg alt优化后的图像3
/body
/html在这个示例中假设optimized-image1.jpg、optimized-image2.jpg和optimized-image3.jpg是原始图像经过压缩和大小调整后的版本。
7.3.3 案例 2使用视频流服务
让我们嵌入一个视频但这次我们使用视频流服务如YouTube或Vimeo以减少主机服务器的负担。
!DOCTYPE html
html
headtitle视频流服务示例/title
/head
bodyh1观看我们的视频/h1iframewidth560height315srchttp://t.cn/A6jUEkYBframeborder0allowfullscreen/iframe
/body
/html7.3.4 案例 3懒加载图像
在这个示例中我们将应用“懒加载”技术这意味着图像只会在用户滚动到它们时才加载。
!DOCTYPE html
html
headtitle懒加载图像示例/titlescriptdocument.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
bodyh1浏览我的作品/h1img classlazy data-srcimage1.jpg alt我的作品1img classlazy data-srcimage2.jpg alt我的作品2img classlazy data-srcimage3.jpg alt我的作品3
/body
/html在这些案例中我们展示了如何优化和管理网站的多媒体内容确保用户体验不受大文件加载时间的影响。从图像压缩到视频流服务再到懒加载技术这些方法都是提高网站性能的有效手段。
