在 html 中使用 iframe 播放视频
Posted
技术标签:
【中文标题】在 html 中使用 iframe 播放视频【英文标题】：Play videos with iframe in html 【发布时间】：2016-10-06 12:02:57 【问题描述】：我想播放一个视频，但它只是下载。 这是我的代码：
<iframe src="videos/1.mp4" ></iframe>
页面加载时的Result是：
如何使用 iframe 而不是 video 标签播放视频？
【问题讨论】：
这背后的逻辑是什么？我可以尝试在P 标签内播放视频，因为我不想要视频元素，它也不起作用
我想你想要的是here。当然，如果需要，您可以将其放在 iframe 下。
我不认为因为一些人仍然坚持使用他们的史前浏览器而降低 html5 的标准会让你走得更远——这是他们自己的错和问题。也许您可以向旧浏览器显示一条消息，并告诉他们需要使用现代浏览器来享受网站的完整体验
不能在 IFRAME URL 中提供视频源，必须使用 video embed 标签。对于旧浏览器支持，您可以使用像 VideoJS 这样的 polyfill，它也可以使用 flash 播放器在旧浏览器中播放
【参考方案1】：
虽然有些浏览器可能支持这种导入视频的方式（使用<iframe>），但有些浏览器会将视频作为文件处理并尝试下载它。显示视频的正确方法是使用<video> 标签：
<video controls>
<source src="videos/1.mp4" type="video/mp4">
</video>
在此处查看 W3Schools 教程：video tag simple tutorial
【讨论】：
原来的问题没有视频标签:-)【参考方案2】：只需使用<video><source src="..." type="video/mp4"></video> 标签。
【讨论】：
【参考方案3】：其实你的代码没有问题！ 但问题在于 IDM（Internet 下载管理器），因为它会钩住您的浏览器请求的每个链接，并查找您尝试访问的目标是否与 IDM 的扩展列表中的内容相匹配，因此第一件事将在文件被执行后执行请求的是 IDM，因为它比您的浏览器具有更高的优先级，并且无论如何它都充当您浏览器中的侦听器。
你要么必须从钩子中排除“localhost” 或者你必须从 IDM 的扩展列表中删除 mp4 扩展（效率不高）
【讨论】：
【参考方案4】：iframe 标签用于显示另一个页面，不用于播放视频。您无法播放带有该标签的视频，无论是 vimeo youtube 还是任何其他公司都允许您使用“iframe”添加视频，因为他们之前已经在该页面上配置了一些选项并放置了视频。这就是您可以通过 iframe 插入视频的原因。
现在，如果您想强制执行此操作，您应该执行以下操作：
创建一个 html-并在该 html 中使用
实现一个视频然后从另一页写<iframe src = "yourwebcontentvideo.html" />
就是这样。
【讨论】：
【参考方案5】：iframe 是一种 HTML 元素，它允许将外部网站、网页或文档（如 word、pdf）或视频嵌入 HTML 文档中。
这是一个通过您网站上的 iframe 标签加载 Youtube 视频的示例
输出：
<pre>
<code>
https://jsfiddle.net/anjaneyulu15/og64djL0/7/
</code>
</pre>
原创内容取自iframeinhtml.com
【讨论】：
【参考方案6】：你可以使用这个，你可以使用 mp4 url 作为 url 参数并返回 HTML VideoJS 播放器。 https://simplevideoplayer.bubbleapps.io/
【讨论】：
【参考方案7】：您可以像这样生成动态内容：
let ifTest = document.getElementById('if-test');
let videoPath = 'https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4';
let videoHtml = '<html><body><video autoplay="true" loop="true" muted="true" ><source src="' + videoPath + '" type="video/mp4" /></video></body></html>';
ifTest.setAttribute('srcdoc', videoHtml);
ifTest.setAttribute('style', 'width:264px; height:150px;')<iframe id="if-test" srcdoc=""></iframe>【讨论】：
以上是关于在 html 中使用 iframe 播放视频的主要内容，如果未能解决你的问题，请参考以下文章
从零开始的异世界！使用＜img＞和＜iFrame＞等HTML基础标签制作一个视频播放网站