国外主机测评 - 国外VPS，国外服务器，国外云服务器，测评及优惠码
html怎么插图
在HTML中，插入图片和视频非常简单，以下是详细的步骤和技术教程：,1、使用 <img>标签插入图片,在HTML中，我们可以使用 <img>标签来插入图片。 <img>标签有以下几个属性：,src：指定图片的路径，可以是相对路径或绝对路径。,alt：指定图片无法显示时的替代文本。,width和 height：指定图片的宽度和高度，可以省略，默认为原始大小。,title：指定鼠标悬停在图片上时显示的提示信息。,示例代码：,2、使用CSS样式调整图片,除了基本的 <img>标签属性外，我们还可以使用CSS样式来调整图片的外观，我们可以设置图片的边框、边距、背景等。,示例代码：,1、使用 <video>标签插入视频,在HTML中，我们可以使用 <video>标签来插入视频。 <video>标签有以下属性：,src：指定视频文件的路径，可以是相对路径或绝对路径。,controls：添加播放、暂停等控制按钮。,width和 height：指定视频播放器的宽度和高度，可以省略，默认为原始大小。,poster：指定视频播放器的封面图片，当视频未播放时显示该图片。,preload：指定页面加载时是否预加载视频，可选值有 none（不预加载）、 metadata（仅预加载元数据）和 auto（自动判断）。,loop：指定视频是否循环播放，可选值有 true（循环播放）和 false（不循环播放）。,muted：指定视频是否静音播放，可选值有 true（静音）和 false（非静音）。,autoplay：指定视频是否自动播放，可选值有 true（自动播放）和 false（不自动播放）。,objectfit：指定视频如何适应播放器容器，可选值有 contain（保持宽高比缩放至完全覆盖容器）、 cover（保持宽高比缩放至完全覆盖容器，但保证视频主体完整显示）和 fill（拉伸视频以填充整个容器）。,crossorigin：指定跨域资源共享策略，可选值有 anonymous（匿名访问）和 usecredentials（携带凭据访问）。,示例代码：,2、使用JavaScript控制视频播放,除了基本的 <video>标签属性外，我们还可以使用JavaScript来控制视频的播放，我们可以监听视频的播放、暂停等事件，并执行相应的操作。,示例代码：, ,<img src=”example.jpg” alt=”示例图片” width=”300″ height=”200″>,<!DOCTYPE html> <html> <head> <style> img { border: 2px solid black; margin: 10px; backgroundcolor: lightgray; } </style> </head> <body> <img src=”example.jpg” alt=”示例图片” width=”300″ height=”200″> </body> </html>,<video src=”example.mp4″ controls width=”300″ height=”200″> <source src=”example.ogg” type=”video/ogg”> <source src=”example.webm” type=”video/webm”> 您的浏览器不支持HTML5视频。 </video>,<!DOCTYPE html> <html> <head> <script> function playVideo() { document.getElementById(“myVideo”).play(); } </script> </head> <body> <video id=”myVideo” src=”example.mp4″ controls width=”300″ height=”200″> <source src=”example.ogg” type=”video/ogg”> <source src=”example.webm” type=”video/webm”> 您的浏览器不支持HTML5视频。 </video> <button onclick=”playVideo()”>播放视频</button> <button onclick=”pauseVideo()”>暂停视频</button> <button onclick=”stopVideo()”>停止视频</button> <script> function pauseVideo() { document.getElementById(“myVideo”).pause(); } function stopVideo() { document.getElementById(“myVideo”).pause(); // 暂停后立即停止播放，避免自动播放下一个视频片段的问题。 document.getElementById(“myVideo”).currentTime = 0; // 将播放位置重置为开头。 } </script> </body> </html>,