论坛首页 › 音画教程 › 马老师video标签属性设置

醉美水芙蓉 发表于 2025-11-27 21:07:46

马老师video标签属性设置

<style>
        .artBox { font-size: 18px; margin: 20px auto; max-width: 1200px; }
        .codebox { min-height: 270px;}
</style>

<div class="artBox">
        <div class="codebox" data-prev="1">
&lt;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&gt;
&lt;/video&gt;
        </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 = '&lt;video';
                for (let v in vals) {
                        output += vals ? `\n\t${v}="${vals}"` : '';
                }
                output += '&gt;\n&lt;/video&gt;';
                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>

kongquedegao 发表于 6 天前

klxf 发表于 6 天前

video标签属性设置，很实用的知识，谢谢醉美管理员分享

顶不顶个球 发表于 6 天前

支持发布，好帖不容错过

juminsheng 发表于 4 天前

非常不错，感谢分享！

jiangfanhuan 发表于 4 天前

赞，顶帖超有启发价值

crorworie 发表于 3 天前

分享超有趣，点赞不能少

lanseyuanwei 发表于 前天 01:34

分享超有趣，点赞送鼓励

lvyouwuhan 发表于 昨天 16:23

感谢分享，增长生活经验

查看完整版本: 马老师video标签属性设置