使用html原生video视频

最新推荐文章于 2025-06-25 11:57:59 发布

仙女爱吃鱼

最新推荐文章于 2025-06-25 11:57:59 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： video video加封面 video去边框 video隐藏工具栏

本文链接：https://blog.youkuaiyun.com/weixin_38318244/article/details/90717305

博客介绍了使用HTML原生video元素的相关技巧，包括去除视频边框、给视频添加封面、隐藏video工具栏等。隐藏工具栏只需不设置controls=\controls\属性，最后还给出了全部代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用html原生video元素视频

		<div class="videoWrapper">
               <a 
                   v-show="btnShow" 
                   class="startButton"
                   @click="play"
               />
                 <img 
                   	id="cover"
                   	src="~assets/img/pd/diffuse/cover.png"
                    hidden
                  >
                 <video
                    id="videoA"
                    width="920"
                    height="530" 
                    src="~assets/video/pd/diffuse/zhuhe25.mp4" 
                 >
                   您的浏览器不支持 video 标签。
                 </video>
          </div>

去视频边框

		video {
          outline: none; 
        }

给视频加封面

		let src = document.getElementById('cover').getAttribute('src') // 此处因为webpack打包的原因不能直接使用‘~assets/img/pd/diffuse/cover.png’为poster属性赋值，所以先赋值给img然后再取出来赋值给poster
        let video = document.getElementById('videoA')
        video.setAttribute("poster", src);

隐藏video工具栏html

不设置controls="controls"属性即可

在这里插入图片描述

全部代码

		created() {
  			let src = document.getElementById('cover').getAttribute('src') // 此处因为webpack打包的原因不能直接			使用‘~assets/img/pd/diffuse/cover.png’为poster属性赋值，所以先赋值给img然后再取出来赋值给poster
       		let video = document.getElementById('videoA')
        	video.setAttribute("poster", src);
		}
      
      methods: {
         play() {
            this.btnShow = false
            // 一开始先隐藏全部工具栏，给视频加封面和ui设置的按钮，点击按钮后再设置工具栏
            let video = document.getElementById('videoA') 
            video.setAttribute("controls", "controls");
            video.play()
         }
      }

            .videoWrapper{
                display: inline-block;
                width: 920px;
                height: 530px;
                position: relative;
                .startButton {
                    position: absolute;
                    left: 23px;
                    bottom: 41px;
                    z-index: 9999;
                    width: 109px;
                    height: 120px;
                    background: url("~assets/img/pd/diffuse/button_01.png") left top / cover no-repeat; 
                    cursor: pointer;
                }
                video {
                    outline: none; 
                }
            }