JQuery Mobile 打开页面内的视频链接答案

【问题标题】：JQuery Mobile Open Video link inside pageJQuery Mobile 打开页面内的视频链接
【发布时间】：2012-08-19 20:20:14
【问题描述】：

我正在使用 JQuery Mobile 1.1.1 版

链接到 YouTube 视频时，我有一个链接列表。

<ul>
<li><a href="link to youtube video">See Video</a></li>
</ul>

我的问题是，当它打开视频页面时，我无法返回该页面，因为没有返回按钮，并且它不再位于 JQM 页面内。

我怎样才能打开它，让它有一个返回按钮来返回页面有一种关闭方式，这样我就可以在不重新启动的情况下返回应用程序？

【问题讨论】：

标签： video jquery-mobile youtube html5-video

【解决方案1】：

我建议使用 YouTube 的 IFRAME 嵌入方法：

就像这样设置<iframe> 一样简单：

<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com"
  frameborder="0"></iframe>

但您也可以使用 YouTube API，请参阅以下文档了解更多信息：https://developers.google.com/youtube/iframe_api_reference

IFrame 播放器 API 可让您将 YouTube 视频播放器嵌入到您的网站并使用 JavaScript 控制播放器。不同于 Flash 和 JavaScript 播放器 API，它们都涉及将 Flash 对象嵌入到您的网页，IFrame API 将内容发布到您的标签页。这种方法提供了比以前更大的灵活性可用的 API，因为它允许 YouTube 提供 HTML5 播放器而不是比适用于不支持 Flash 的移动设备的 Flash 播放器。

Src：以上链接

【讨论】：

iframe 存在于 DOM 中的什么位置？您是动态添加它，还是应该已经存在，然后使用 jquery 设置 src 属性？ iframe 是否在链接打开的对话框中？
1) 无论您希望用户在哪里看到它。 2) 两者都可以。 3) 完成此操作后，我只是将 IFRAME 放置在页面的 data-role="content" 部分并将其宽度设置为 100%（如果您在window.resize).

【解决方案2】：

您可以使用新的<video> HTML5 标签在HTML 页面中嵌入视频播放器。

【讨论】：

【解决方案3】：

@Jasper 是正确的，使用 iframe 嵌入是从移动网站播放视频的最佳方式。没有讨论的是其他内容。这是 jquery mobile 1.2.0（截至 2012 年 10 月）中新弹出功能的精彩演示：

http://jquerymobile.com/demos/1.2.0/docs/pages/popup/popup-iframes.html

【讨论】：