zoukankan      html  css  js  c++  java
  • 网页内嵌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

  • 相关阅读:
    Http Get Post put delete
    YII AR查询方法
    YII CJson类
    Yii 配置文件
    linux大文件分割 split命令
    chrome插件 postman插件 接口测试、API & HTTP 请求调试工具
    Yii 实现restful
    restful理解
    how tomcat works 读书笔记(一)----------一个简单的webserver
    HDU2206 IP的计算 【经典题】
  • 原文地址:https://www.cnblogs.com/smartisn/p/15146762.html
Copyright © 2011-2022 走看看