as198324
2021-03-29 14:49
采纳率: 25%
浏览 203

PC端video全屏时在上面添加图标

项目要求在PC端视频全屏的时候加上公司logo

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • 空城机 2021-03-29 15:22
    已采纳

    可以使用video.js来设置。如果只是<video>标签的话,可以给<video>添加一个父元素,父元素中控制全屏,将公司logo添加到父元素上面

    点赞 评论
  • 空城机 2021-03-29 15:38
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>测试</title>
        <style>
    		#video {
    			position: relative;
    			width: 900px;
    		}
            #video::before {
    			content: "公司logo";
                width: 150px;
                height: 50px;
                background-color: blue;
                position: absolute;
                top: 0px;
                left: 0px;
                z-index: 999;
            }
    		.fullScreen {
    			position: absolute;
    			top: 0px;
    			right: 0px;
    			background-color: aqua;
    			cursor: pointer;
    		}
        </style>
    </head>
    <body>
    	<div id="video">
    		<video src="./source/1.mp4" controls="controls" style="width: 100%;height: 100%;"></video>
    		<div class="fullScreen" onclick="fullScreen()">全屏</div>
    	</div>
        
    	<script type="text/javascript">
    		let isfull = false;
    		function fullScreen() {
    			if (!isfull) {
    				document.getElementById('video').requestFullscreen();
    				isfull = !isfull;
    			} else {
    				document.exitFullscreen();
    				isfull = !isfull;
    			}
    		}
    	</script>
    </body>
    </html>

     

    点赞 评论
  • 有问必答小助手 2021-03-29 17:16

    您好,我是问答小助手,看到您的问题已被小伙伴做出解答,欢迎您加入CSDN!

    目前问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632

    点赞 评论

相关推荐 更多相似问题