网页内嵌YouTube视频,极其简单

1,在YouTube中复制iframe代码

2,HTML代码:

 1 <!DOCTYPE html>
 2 <html>
 3   <body>
 4     <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
 5     <div id="player"></div>
 6 
 7     <script>
 8       // 2. This code loads the IFrame Player API code asynchronously.
 9       var tag = document.createElement('script');
10 
11       tag.src = "https://www.youtube.com/iframe_api";
12       var firstScriptTag = document.getElementsByTagName('script')[0];
13       firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
14 
15       // 3. This function creates an <iframe> (and YouTube player)
16       //    after the API code downloads.
17       var player;
18       function onYouTubeIframeAPIReady() {
19         player = new YT.Player('player', {
20           height: '360',
21            '640',
22           videoId: 'M7lc1UVf-VE',
23           events: {
24             'onReady': onPlayerReady,
25             'onStateChange': onPlayerStateChange
26           }
27         });
28       }
29 
30       // 4. The API will call this function when the video player is ready.
31       function onPlayerReady(event) {
32         event.target.playVideo();
33       }
34 
35       // 5. The API calls this function when the player's state changes.
36       //    The function indicates that when playing a video (state=1),
37       //    the player should play for six seconds and then stop.
38       var done = false;
39       function onPlayerStateChange(event) {
40         if (event.data == YT.PlayerState.PLAYING && !done) {
41           setTimeout(stopVideo, 6000);
42           done = true;
43         }
44       }
45       function stopVideo() {
46         player.stopVideo();
47       }
48     </script>
49   </body>
50 </html>

帮助文档:https://developers.google.com/youtube/iframe_api_reference#setPlaybackQuality

原文地址:https://www.cnblogs.com/smartisn/p/15146762.html