html - 嵌入 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 的 this

下载这些：

• 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

您可以使用缩略图并仅在用户单击缩略图时加载播放器

您可以在主题资源管理器示例中查看如何使用 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
      }
    });