从 iframe API 延迟加载 youtube 视频 [英] Lazy Load youtube video from iframe API

问题描述

我想使用 iframe API 延迟加载 YouTube 视频.IE.一开始只加载海报图片，当用户点击它时，只加载实际图片及其内容.

解决方案

终于成功了，下面的代码在 angularJS 中.

HTML

<div data-ng-repeat="videoIds track by $index"><div id="uniQueId" ng-click="playVideo(video, 'player' + $index)"><div class="video-play-button"></div>

JS

 $scope.playVideo = function(videoId, id) {$scope.players[id] = new YT.Player(id, {视频ID:视频ID，宽度:'400'，高度:'300'，playerVars:{'自动播放':1}，事件:{'onStateChange': $scope.onPlayerStateChange}});};

I want to lazy load the youtube video with iframe API. ie. load only the poster image in the beginning and when user clicks on it then only load the actual image and its content.

解决方案

Finally it worked, below code is in angularJS.

HTML

<div data-ng-repeat="video in videoIds track by $index">
    <div id="uniQueId" ng-click="playVideo(video, 'player' + $index)">
        <div class="video-play-button"></div>
    </div>
</div>

JS

 $scope.playVideo = function(videoId, id) {
        $scope.players[id] = new YT.Player(id, {
            videoId: videoId,
            width: '400',
            height: '300',
            playerVars: { 'autoplay': 1 },
            events: {
                'onStateChange': $scope.onPlayerStateChange
            }
        });
    };

这篇关于从 iframe API 延迟加载 youtube 视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！