video标签属性设置

马黑黑

video标签属性设置

<video src="https://img.tukuppt.com/video_show/2475824/00/08/27/5d1c226cd2de7.mp4" width="300" height="300" autoplay loop style="border: 1px solid gray> </video>

宽度 :

800

高度 :

600

controls
autoplay
loop
muted
poster
disablePictureInPicture
object-fit

【注】object-fit 为 CSS 属性，主要用于控制图像或视频在固定宽高比例的容器中显示时的缩放和裁剪方式，值有 fill、contain、cover、none、scale-down 等，本例选用 cover 值。

马黑黑

disablePictureInPicture 属性用于设置禁用画中画与否，设为 true 表示禁用，设为 false 表示启用

muted 是静音与否的属性，video标签中出现 muted="muted" 或 muted 关键字，视为静音，不出现视为开启声音。静音属性再浏览器播放策略中有妙用：若浏览器不允许视频自动播放，其实是不允许视频带有声音自动播放，设置为静音，autoplay 属性或 js 的 videoElement.play() 指令性则能生效。

梦江南

谢谢黑黑老师细讲video标签属性设置。学习收藏。

红影

这个好，和video有关的属性都在了，而且设置了外框线，可以变化这些设置后，在预览里对照着看了

马黑黑

红影 发表于 2025-11-27 22:29
这个好，和video有关的属性都在了，而且设置了外框线，可以变化这些设置后，在预览里对照着看了

加个容器元素更好。这里只是为了演示 video标签 的常用属性和CSS属性

红影

点这些设置，可以直接进到代码里，也可以在预览中直接看到效果，真好。
感谢黑黑的耐心讲解。

红影

封装里的已经设置了muted 静音，如果需要视频声音的应该怎么弄了？我记得黑黑讲过的，一下子想不起来了，也就是怎么取消已经设置过的muted呢

马黑黑

红影 发表于 2025-11-27 22:33
封装里的已经设置了muted 静音，如果需要视频声音的应该怎么弄了？我记得黑黑讲过的，一下子想不起来了，也 ...

{
    muted: true // JS 操作静音，muted 属性值可选两个，true、false
}

HTML 代码中，一般出现 muted 或 muted="muted" 视为静音，JS的操作有所不同，用 true 和 false 表示静音、非静音

马黑黑

红影 发表于 2025-11-27 22:31
点这些设置，可以直接进到代码里，也可以在预览中直接看到效果，真好。
感谢黑黑的耐心讲解。

视频标签 <video> 是HTML5一个特别的封装，其内部非常复杂，但使用者只需要掌握几个常用到的基于video标签的HTML属性和CSS相关的属性即可

杨帆

基础而实用的知识，谢谢马老师精彩演示视频标签 <video> 的HTML属性和CSS相关的属性

马黑黑

杨帆 发表于 2025-11-28 15:11
基础而实用的知识，谢谢马老师精彩演示视频标签  的HTML属性和CSS相关的属性