HTML入门之多媒体标签

学习目标：

• 图片标签
• 视频标签
• 音频标签

---

学习内容：

1. 学习图片，视频，音频标签的书写格式
2. 学习各标签的属性

---

图片标签

<img src="img/1.png" alt="光遇" />

属性：

1. src：代表图片路径可以是本地路径或者网络路径

  <!-- 本地路径  -->
   <img src="img/1.png" alt="光遇" />
   <!-- 网络路径 -->
   <img src="https://pic3.zhimg.com/80/v2-bc7f724aee22bf3b64adbe07b776d5a1_720w.webp?source=1940ef5c" alt="风景图" />

2. alt:代表如果图片加载失败就会显示alt中的文本信息
   
3. width与height

   <img src="img/1.png" alt="光遇" 
    width="360"
    height="480"
   />

width：控制图片的宽度
height：控制图片的高度

不同类型的图片

---

视频标签

<video src="./video/1.mp4" 
	controls 
	autoplay 
	muted 
	loop 
	width="720" 
 	height="480"
 ></video>

属性标签:

1. src:代表视频路径可以是本地路径或者网络路径
2. controls:浏览器的默认播放控件，包括暂停/播放按钮,音量
3. muted：将视频静音
4. autoplay: 是否自动播放，只有在视频是静音状态下或者视频本身是没有音频的情况才能自动播放
5. loop：是否循环播放，默认是
6. width:
7. height:

其他视频格式

<video controls>
    <source src="./video/1.mp4" type="video/mp4">
    <!-- <source src="" type=""> -->
    <p>您的浏览器不支持视频播放</p>
   </video>

高级标签

   <video 
    src="./video/1.mp4" 
    poster="./img/3.png" 
    width="720" 
    height="480" 
    preload
    controls
   ></video>

1. poster: 添加一张图片作为视频的封面
2. preload:当前视频是否预加载，即使用户没有点击播放视频，也先加载一部分视频，这样用户点击即可播放

给视频加字幕

 <video src="./video/1.mp4" width="720" height="480" controls>
        <track kind="subtitles" srclang="zh" src="subtitles\subtitle.vtt">
    </video>

错误

假设出现 Unsafe attempt to load URL /subtitles/subtitle.vtt from frame with URL /day01.html. 'file:' URLs are treated as unique security origins.

解决方案1:
解决方案可以参考：解决Unsafe attempt to load URL

解决方案2: 将网页与字幕资源放到自己的服务器上面
然后开启字幕

解决方案3: 在vscode中安装 Live Server 这款插件，一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。

然后在vscode界面右下角点击
变成

这样就可以访问到了

PS：

---

音频图片

<p>We_Are_The_Brave.mp3</p>
    <audio src="./audio/We_Are_The_Brave.mp3" controls></audio>

属性

因为audio与video中的属性基本一致，所以video可以使用的，audio也可以使用