使用html原生video视频

使用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; 
                }
            }