首页iframe 视频分屏播放

iframe 视频分屏播放

时间: 2023-07-21 16:08:10 浏览: 51

要在 iframe 中实现视频分屏播放，你可以使用 HTML5 的 video 标签和 CSS 来实现。首先，你需要在 iframe 中插入两个 video 标签，然后设置它们的样式来实现分屏效果。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <style> .video-container { display: flex; } .video-container video { width: 50%; height: auto; } </style> </head> <body> <div class="video-container"> <video src="video1.mp4" controls></video> <video src="video2.mp4" controls></video> </div> </body> </html> ``` 在上面的示例代码中，我们创建了一个名为 `video-container` 的 div 容器，并使用 CSS 中的 `display: flex;` 属性使两个 video 标签并排显示。每个 video 标签都使用了 `width: 50%;` 来占据容器的一半宽度。你可以将视频文件的路径替换为你自己的视频文件路径，并根据需要调整样式和布局。注意：由于 iframe 的安全限制，视频文件必须在同一个域名下才能正常显示。否则，你可能会遇到跨域访问的问题。