嵌入YouTube视频

Question

我在我的网站上嵌入了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视频但在用户想要观看视频时加载这些数据的更好方法？

Answer 1

您可以使用缩略图，只在用户点击缩略图时加载播放器

您可以在Topic Explorer示例

上看到如何使用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
      }
    });