html5标签video的简单使用

video标签现在也是我们经常使用的标签了，给网站加个视频，提高网站的丰富度，对优化和客户的体验都是有好处的。

   <video poster="封面图片" src="视频地址" controls="controls" class="img-fluid" style="mix-blend-mode: screen;display:block;"  id="videL">
                    your browser does not support the video tag
                    </video>
					<a href="javascript:videoplay();"  class="video-play"><i class="fa fa-play"></i></a>
 <script>
                        function videoplay() {
                            var videL = document.getElementById('videL');
                            if (videL.paused) {
                                videL.play();
                            } else {
                                videL.pause();
                            }                           
                        } 
                   </script>

poster=”封面图片” 属性是添加视频的封面图片

src=”视频地址” 视频地址

style=”mix-blend-mode: screen;display:block;object-fit:fill;outline: none”

每次视频播放的时候都会有个黑框，特别丑，怎么去掉呢？试了好多，只有outline: none 管用

自己再加个开始，暂停的按钮就更完美一点了。js执行方法videoplay()。