video标签属性设置
<style>.artBox { font-size: 18px; margin: 20px auto; max-width: 1200px; }
.codebox { min-height: 270px;}
h1 { text-align: center; font-size: 1.5em; }
</style>
<div class="artBox">
<h1>video标签属性设置</h2>
<div class="codebox" data-prev="1">
<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>
</div>
<div>
<label for="rngWidth">宽度 : </label>
<input id="rngWidth" name="attr" type="range" min="300" max="1600" value="800" step="10" oninput="opWidth.value=this.value" />
<output id="opWidth">800</output><br>
<labelfor="rngWidth">高度 : </label>
<input id="rngHeight" name="attr" type="range" min="300" max="1600" value="600" step="10" oninput="opHeight.value=this.value" />
<output id="opHeight">600</output>
<br>
<input id="controls" type="checkbox" name="attr" value="0" title="控制面板" />
<label for="controls" title="控制面板">controls</label>
<br>
<input id="autoplay" type="checkbox" name="attr" value="0" title="自动播放" />
<label for="autoplay" title="自动播放">autoplay</label>
<br>
<input id="loop" type="checkbox" name="attr" value="0" title="循环播放">
<label for="loop" title="循环播放">loop</label>
<br>
<input id="muted" type="checkbox" name="attr" value="0" title="静音" />
<label for="muted" title="静音">muted</label>
<br>
<input id="poster" type="checkbox" name="attr" value="0" title="海报" />
<label for="poster" title="海报">poster</label>
<br>
<input id="disablePictureInPicture" type="checkbox" name="attr" value="0" title="画中画" />
<label for="disablePictureInPicture" title="画中画">disablePictureInPicture</label>
<br>
<input id="objectFit" type="checkbox" name="attr" value="0" title="画面自适应" />
<label for="objectFit" title="画面自适应">object-fit</label>
<blockquote>【注】<txt-red>object-fit</txt-red> 为 CSS 属性，主要用于控制图像或视频在固定宽高比例的容器中显示时的缩放和裁剪方式，值有 fill、contain、cover、none、scale-down 等，本例选用 cover 值。</blockquote>
</div>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
const createVideoCode = (elm, vals) => {
let output = '<video';
for (let v in vals) {
output += vals ? `\n\t${v}="${vals}"` : '';
}
output += '>\n</video>';
elm.innerHTML = output;
};
const codebox = document.querySelector('.codebox');
const chkboxes = document.getElementsByName('attr');
const init = () => {
const attributes = {
src: 'https://img.tukuppt.com/video_show/2475824/00/08/27/5d1c226cd2de7.mp4',
width: rngWidth.value,
height: rngHeight.value,
controls: controls.checked ? 'controls' : '',
autoplay: autoplay.checked ? 'autoplay' : '',
loop: loop.checked ? 'loop' : '',
muted: muted.checked ? 'muted' : '',
poster: poster.checked ? 'https://638183.freep.cn/638183/Pic/1.jpg' : '',
disablePictureInPicture: disablePictureInPicture.checked ? 'true' : '',
style: 'border: 1px solid gray; margin: 20px;' + (objectFit.checked ? ' object-fit: cover;' : '')
};
createVideoCode(codebox, attributes);
linenumber();
};
chkboxes.forEach(chkbox => chkbox.onclick = () => init());
init();
</script> disablePictureInPicture 属性用于设置禁用画中画与否，设为 true 表示禁用，设为 false 表示启用
muted 是静音与否的属性，video标签中出现 muted="muted" 或 muted 关键字，视为静音，不出现视为开启声音。静音属性再浏览器播放策略中有妙用：若浏览器不允许视频自动播放，其实是不允许视频带有声音自动播放，设置为静音，autoplay 属性或 js 的 videoElement.play() 指令性则能生效。 谢谢黑黑老师细讲video标签属性设置。学习收藏。{:4_187:} 这个好，和video有关的属性都在了，而且设置了外框线，可以变化这些设置后，在预览里对照着看了{:4_187:} 红影 发表于 2025-11-27 22:29
这个好，和video有关的属性都在了，而且设置了外框线，可以变化这些设置后，在预览里对照着看了
加个容器元素更好。这里只是为了演示 video标签 的常用属性和CSS属性 点这些设置，可以直接进到代码里，也可以在预览中直接看到效果，真好。
感谢黑黑的耐心讲解。{:4_204:} 封装里的已经设置了muted 静音，如果需要视频声音的应该怎么弄了？我记得黑黑讲过的，一下子想不起来了，也就是怎么取消已经设置过的muted呢{:4_204:} 红影 发表于 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相关的属性{:4_180:} 杨帆 发表于 2025-11-28 15:11
基础而实用的知识，谢谢马老师精彩演示视频标签的HTML属性和CSS相关的属性
{:4_190:}
页:
[1]