如何让视频标签与fancybox一起使用?

时间:2012-11-14 21:34:36

标签: html5 fancybox html5-video

我想使用HTML5 <video>代码和fancybox播放视频,其中包含指向youtube视频的链接?

这是我目前的代码

<video width="480" height="270" controls="controls" poster="../images/youtube-logo.png">
  <source src="http://o-o---preferred---sn-5hn7snl7---v12---lscache8.c.youtube.com/videoplayback?upn=paJG2CcEhGw&amp;sparams=cp%2Cgcr%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&amp;fexp=906356%2C910014%2C914093%2C922401%2C920704%2C912806%2C927201%2C922403%2C925003%2C913546%2C913556%2C916805%2C920201%2C901451&amp;ms=au&amp;expire=1352949266&amp;itag=46&amp;ipbits=8&amp;gcr=nl&amp;sver=3&amp;ratebypass=yes&amp;mt=1352923510&amp;ip=83.83.121.109&amp;mv=m&amp;source=youtube&amp;key=yt1&amp;cp=U0hUR1lPV19LUENONF9RSUFDOjBkVU41a1M4UEVp&amp;id=d72f1d6250563a1e&amp;signature=6C5130076CA770F67B4C797191BC0997EA040B74.10D3AEAA60E7AE1CF1D49DACF7178F3FCBBD56AE" type="video/mp4">
  <source src="http://o-o---preferred---sn-5hn7snl7---v12---lscache8.c.youtube.com/videoplayback?upn=paJG2CcEhGw&amp;sparams=cp%2Cgcr%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&amp;fexp=906356%2C910014%2C914093%2C922401%2C920704%2C912806%2C927201%2C922403%2C925003%2C913546%2C913556%2C916805%2C920201%2C901451&amp;ms=au&amp;expire=1352949266&amp;itag=46&amp;ipbits=8&amp;gcr=nl&amp;sver=3&amp;ratebypass=yes&amp;mt=1352923510&amp;ip=83.83.121.109&amp;mv=m&amp;source=youtube&amp;key=yt1&amp;cp=U0hUR1lPV19LUENONF9RSUFDOjBkVU41a1M4UEVp&amp;id=d72f1d6250563a1e&amp;signature=6C5130076CA770F67B4C797191BC0997EA040B74.10D3AEAA60E7AE1CF1D49DACF7178F3FCBBD56AE" type="video/ogg">
  <source src="http://o-o---preferred---sn-5hn7snl7---v12---lscache8.c.youtube.com/videoplayback?upn=paJG2CcEhGw&amp;sparams=cp%2Cgcr%2Cid%2Cip%2Cipbits%2Citag%2Cratebypass%2Csource%2Cupn%2Cexpire&amp;fexp=906356%2C910014%2C914093%2C922401%2C920704%2C912806%2C927201%2C922403%2C925003%2C913546%2C913556%2C916805%2C920201%2C901451&amp;ms=au&amp;expire=1352949266&amp;itag=46&amp;ipbits=8&amp;gcr=nl&amp;sver=3&amp;ratebypass=yes&amp;mt=1352923510&amp;ip=83.83.121.109&amp;mv=m&amp;source=youtube&amp;key=yt1&amp;cp=U0hUR1lPV19LUENONF9RSUFDOjBkVU41a1M4UEVp&amp;id=d72f1d6250563a1e&amp;signature=6C5130076CA770F67B4C797191BC0997EA040B74.10D3AEAA60E7AE1CF1D49DACF7178F3FCBBD56AE" type="video/webm">
Your browser does not support the video tag.
<iframe width="480" height="270" type="application/x-shockwave-flash"
src="http://www.youtube.com/embed/1y8dYlBWOh4?wmode=opaque">
</iframe>
</video>

正如您所看到的,我还添加了iframe标记以支持旧浏览器。

但经过一些调整后我无法在视频标签的任何视频中打开所有内容吗?

提前致谢!

1 个答案:

答案 0 :(得分:0)

直接YouTube链接已“刷新”,虽然它们第二天工作了一段时间,但它们不再有效,导致链接被“破坏”。

在html5中播放youtube视频的最佳方式就是这样

<iframe width="480" height="270"
src="http://www.youtube.com/embed/1y8dYlBWOh4?html5=1">
</iframe>

html5=1告诉Youtube使用html5播放视频,而不是闪现!