如何在浏览器中启用嵌入视频对象的拖动(即YouTube视频)

时间:2011-03-01 21:12:06

标签: javascript browser drag-and-drop embed html5-video

如何启用在网页上拖动<embed>对象(使用javascript)?通常,当我在网页上选择一些文字或图像时,我可以将其拖动,我想对该对象做同样的事情。

具体来说,我希望能够拖动YouTube视频。我现在不关心丢弃,而且如果可能的话我也不想使用jQuery UI。 YouTube嵌入看起来像这样

<embed id="movie_player" ... type="application/x-shockwave-flash" />

我正在编写浏览器扩展程序(适用于Chrome),因此我可以完全访问DOM和浏览器。

1 个答案:

答案 0 :(得分:1)

我认为jQuery在这里是最好的,它也是javascript,你所做的只是嵌入到你的网站。如果你想要一个半透明效果来查看你正在拖动,我想你可以为拖动句柄添加一个事件。使用onMouseDown和onMouseUp。例如,这个div处理你的youtube: 透明的CSS是:

opacity: .7; filter:Alpha(Opacity=70);其中0.7和70是元素的不透明度百分比!

[实施例]:

<div onMouseDown="this.style.opacity='0.7'; this.style.filter='Alpha(Opacity=70)';" onMouseUp="this.style.opacity='1.0'; this.style.filter='Alpha(Opacity=100)';"><br><embed something here></embed></div>

好的,如果你以某种方式改变主意并且想要使用jQuery,试一试,我保证这非常容易!

首先,将其嵌入您的网站:

<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>

<script language="javascript" type="text/javascript">$(document).ready(function(){$(".drag").draggable();});</script>

其次,在这种情况下,给你想要拖动类“拖”的任何东西:

<div class="drag">YOUR YOUTUBE VIDEO EMBED HERE</div>

将它与半透明效果一起使用,我认为你需要的一切,我希望这有帮助。

xx3004,