Javascript 延迟加载Angular 5中的嵌入式YouTube视频
我想在Angular中实现页面中嵌入YouTube视频的延迟加载。最初加载页面时,我会显示所有YouTube视频,在单击“播放”按钮之前,我不想加载视频。我通过这个链接了解了使用srcdoc属性而不是src来实现这一点的一些技巧, 但是,由于某些原因,用于定位静态图像和播放按钮的CSS似乎不起作用。我无法理解为什么这不起作用,我会感谢任何人的帮助。下面是我尝试使用的HTML和TS文件代码 videos.app.htmlJavascript 延迟加载Angular 5中的嵌入式YouTube视频,javascript,angular,iframe,youtube-iframe-api,Javascript,Angular,Iframe,Youtube Iframe Api,我想在Angular中实现页面中嵌入YouTube视频的延迟加载。最初加载页面时,我会显示所有YouTube视频,在单击“播放”按钮之前,我不想加载视频。我通过这个链接了解了使用srcdoc属性而不是src来实现这一点的一些技巧, 但是,由于某些原因,用于定位静态图像和播放按钮的CSS似乎不起作用。我无法理解为什么这不起作用,我会感谢任何人的帮助。下面是我尝试使用的HTML和TS文件代码 videos.app.html <div class="col-md-4" *n
<div class="col-md-4" *ngFor="let video of videos">
<iframe width="100%" height="315" srcdoc="<style*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href={{video.embedUrl}}?autoplay=1><img src=https://i.ytimg.com/vi/{{video.videoId}}/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLAy_BbpIDxCwMRz0xwLGKTHHNDIYA><span>▶</span></a>"[src]="video.embedUrl | sanitizeurl" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h3 class="my-3 video-section-heading">{{video.name}}</h3>
<p class="text-muted video-section-subheading">{{video.description}}</p>
</div>
消毒液管道.ts
videos: any[] = [
{
name: 'Jagadhodharana',
description: 'Performance in the 67th art festival In MFAC on Dec 6th2018.' +
'Orchestra' +
'Choreography and nattuvangam:Guru Pandanallur S pandian' +
'Vocal:Pozhakudi G R Praveen' +
'Mirdangam: Mayavaram T Vishwanathan' +
'Violin:Sri Kalaiarasan',
embedUrl: 'https://www.youtube.com/embed/hEB9ilzkowY',
videoId: 'hEB9ilzkowY',
},
{
name: 'Bharathanatyam |Mohamana | Bhairavi Varanam',
description: 'Performance at Mylapore Fine Arts Club - 2019' +
'Nattuvangam and Choreography - Kalaimamani Pandanalur S Pandian' +
'Vocal - Pozhakudi G R Praveen' +
'Mridangam - Mayavaram T Viswanathan' +
'Violin - Sri Kalaiarasan',
embedUrl: 'https://www.youtube.com/embed/MWl75SMF1Jc',
videoId: 'MWl75SMF1Jc',
},
{
name: 'Bharatanatyam Dance |Idai vida veru venumo Sakshi | Saveri | Rupakam',
description: 'Performance at MFAC annual dance festival 2018.' +
'Choreography and Nattuvangam: Kalaimamani Pandanalur Sri S Pandian' +
'Vocal: Pozhakudi Sri G R Praveen' +
'Mridangam: : Mayavaram Sri T Viswanathan' +
'Violin: Sri Kalaiarasan',
embedUrl: 'https://www.youtube.com/embed/TqQDQzcp-_w',
videoId: 'TqQDQzcp-_w'
}]
@Pipe({
name: 'sanitizeurl'
})
export class SanitizeurlPipe implements PipeTransform {
constructor(private domSanitizer: DomSanitizer) {}
transform(value: any, args?: any): any {
return this.domSanitizer.bypassSecurityTrustResourceUrl(value);
}
}