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

    点赞 评论

报告相同问题？

提交

相关推荐 更多相似问题