2013-05-05 328 views
0

我嵌入YouTube视频在我的网站是这样的:嵌入YouTube视频

<iframe width="320" height="180" src="http://www.youtube.com/embed/12345678" 
    style="border: none" allowfullscreen id="myVideo"></iframe> 

这个iframe中的href下载一本是2.7 KB

那下载这些:

所以即使用户不看视频的是,他几乎下载356 KB的数据。在我的网站上显示Youtube视频的更好方式是什么,但在用户想要观看视频时加载这些数据?

+0

只要你不借助iframe overpopulate您的网页,我想说356 KB的数据并不是真正需要担心的事情。 – Juampi 2013-05-05 12:10:15

+1

是的,但这会降低网页的移动性能。 – trante 2013-05-05 12:13:25

+0

这就是您为嵌入YouTube视频付出的代价。您可以尝试使用重定向到实际视频的缩略图。 – Juampi 2013-05-05 12:17:16

回答

2

您可以使用缩略图,当用户点击缩略图只加载玩家

你可以看到怎么办的主题浏览器例如,这使用AngularJS一个例子

应用:

https://yt-topic-explorer.googlecode.com/git/dist/index.html

查看:

https://code.google.com/p/yt-topic-explorer/source/browse/app/views/main.html

代码片段:

<div class="player-container"> 
     <img ng-click="videoClicked($event.target, videoResult.id)" ng-src="{{videoResult.thumbnailUrl}}" class="thumbnail-image"> 
     <div class="title"><a ng-href="{{videoResult.href}}" target="_blank">{{videoResult.title}}</a></div> 
</div> 

控制器:

https://code.google.com/p/yt-topic-explorer/source/browse/app/scripts/controllers/main.js

代码片段:

function playVideo(container, videoId) { 
    var width = container.offsetWidth; 
    var height = container.offsetHeight; 

    new YT.Player(container, { 
     videoId: videoId, 
     width: width, 
     height: height, 
     playerVars: { 
     autoplay: 1, 
     controls: 2, 
     modestbranding: 1, 
     rel: 0, 
     showInfo: 0 
     } 
    }); 
+0

谢谢。我实现了它。 – trante 2013-05-14 05:54:21