嵌入YouTube視頻

我嵌入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

那下載這些：

287 KB http://s.ytimg.com/yts/swfbin/watch_as3-vf123456.swf
40.4 KB http://s.ytimg.com/yts/jsbin/www-embed-vf123456.js
26.7 KB http://s.ytimg.com/yts/cssbin/www-embed-webp-vf123456.css
0.5 KB http://i3.ytimg.com/crossdomain.xml

所以即使用戶不看視頻的是，他幾乎下載356 KB的數據。在我的網站上顯示Youtube視頻的更好方式是什麼，但在用戶想要觀看視頻時加載這些數據？

來源

2013-05-05 trante

只要你不借助iframe overpopulate您的網頁，我想說356 KB的數據並不是真正需要擔心的事情。 – Juampi 2013-05-05 12:10:15

是的，但這會降低網頁的移動性能。 – trante 2013-05-05 12:13:25

這就是您爲嵌入YouTube視頻付出的代價。您可以嘗試使用重定向到實際視頻的縮略圖。 – Juampi 2013-05-05 12:17:16

您可以使用縮略圖，當用戶點擊縮略圖只加載玩家

你可以看到怎麼辦的主題瀏覽器例如，這使用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 
     } 
    });

來源

2013-05-06 03:15:33

謝謝。我實現了它。 – trante 2013-05-14 05:54:21

嵌入YouTube視頻

回答

相關問題