欢迎光临
我们一直在努力

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()。

赞(4)
未经允许不得转载:衡水seo博客 » html5标签video的简单使用
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

建站优化更专业 更敬业 更负责

建站报价联系我们