如何让网页上的Flash视频以弹出窗口播放

关注

原创最新推荐文章于 2026-05-18 11:11:40 发布 2k 阅读 AI 写同款· GEO 优化 ›

简单点击图片弹出video视频弹窗功能毕设篇：实现旅游网中的景点视频模块使用语言及框架： HTML+JS+CSS Vue.js+Element的本地引入阿里巴巴矢量图标库本地引入这里为了简化重复代码，我们使用vue的v-for来帮助我们遍历数组或对象，使用v-bind来实现数据的动态绑定，使用v-on实现事件监听模块需求： 1.点击图片或图标元素、文字可以弹出video视频弹窗（js中的onclick事件） 2.悬浮图片时，图片进行放大动画效果，并且播放按钮图标不被动画效果影响（css中的父类相对定位，子类绝对定位） 3.视频播放后或关阅读详情

如何让网页上的Flash视频以弹出窗口播放

很多浏览器都有这个功能，当你把鼠标移动到网页视频上，就可以看到顶部有一个按钮出现，弹出独立播放器。当你点击按钮，视频就弹出在新窗口播放了，这时候视频窗口的大小可以自由调整不再受页面的限制。

这是如何做到的呢？
首先想到的是，浏览器缩放缩放了页面的大小，正好可以显示视频窗口的大小。好像火狐有一个魔镜功能，可以实现网页简报既截取网页任意部分。要做到这点，浏览器的外框程序必须是自己写的（国内的浏览器都是这样的）。如果浏览器不是自己的，能不能通过BHO来实现呢？
另一个想法是，把页面里视频相关的HTML代码提取出来，然后在一个新页面框架里显示。但是这样的话，就必须对页面代码的结构非常熟悉，而且必须跟随变化。还有，当新视频窗口弹出时，播放进度是不能保持的，必须重头播放。

其实有一个简单的办法，那就是把页面里的Flash控件重新激活到另一个窗口上。因为我们知道，Flash其实是一个ActiveX控件，运行在IE容器里。如果我们创建一个新的Ole Container，就可以把Flash控件激活到新的Container里。这样，Flash控件就可以在保持状态的情况下在不同的容器之间转换，既自由的在页面和弹出窗口中切换。
所以，要弹出（IE）页面里的Flash视频，需要以下几步：
1. 通过Web Browser控件或者BHO，在页面加载完成后得到页面的DOM模型，找到Embed节点对象，即可查到Flash空间。
2. 创建Ole容器，比如ATL的CAxWindow
3. 激活Flash控件到新的Ole容器

代码片段(基于ATL)：
//pFlashDisp为Flash控件对象，通过分析页面DOM获得

//保存IE容器，用于恢复
CComQIPtr<IOleObject> spFlashOleObj = pFlashDisp;
spFlashOleObj->GetClientSite(&m_spIESite);

//必选先关闭，才能转移到新的窗口上
spFlashOleObj->DoVerb(OLEIVERB_HIDE, NULL, m_spIESite, 0, NULL, NULL);
spFlashOleObj->Close(OLECLOSE_NOSAVE);

//创建新的Ole容器(ATL的CAxWindow类)
CRect clientRect;
GetClientRect(&clientRect);
m_HostWin.Create(m_hWnd, &clientRect, NULL, WS_CHILD);

CComPtr<IAxWinHostWindow> spHost;
m_HostWin.QueryHost(&spHost);

//使得Flash可以查询到IE提供的IServiceProvider，比如可以打开新的网页
CComQIPtr<IObjectWithSite> spObjWithSite;
m_HostWin.QueryHost(IID_IObjectWithSite, (void**)&spObjWithSite);
spObjWithSite->SetSite(pOuterSite);

//激活到新容器, m_hWnd为m_HostWin的父窗口
spHost->AttachControl(spFlashOleObj, m_hWnd);