从iframe API延迟加载youtube视频 [英] Lazy Load youtube video from iframe API
本文介绍了从iframe API延迟加载youtube视频的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想用iframe API延迟加载youtube视频. IE.首先仅加载海报图像,当用户单击它时,仅加载实际图像及其内容.
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.
推荐答案
最后成功了,下面的代码在angularJS中.
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屋!
查看全文