[ES6] Use Youtube Api，實作 youtube 影音

Upload Youtube

當我們上傳影音到 youtube 後，
一般串接影音作法，只要點擊介面上的嵌入影音
就會得到一串 iframe 的方式！
但是今天我們需要偵測用戶暫停或者 replay，甚至記載點擊數
以上種種客製化，就需要使用到 youtube提供的 API

程式碼

index.html

<div class="video">
  <div id="video_Player"></div>
</div>

<!-- 下方這串最後被我移除，實作在Creative_video.js -->
<script>
  /* This code loads the IFrame Player API code asynchronously. */
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>

app.js

/* 所謂的 entry */
import Creative_video from "./Creative_video.js";
$(function () {
  /* 在document ready 後實作 */
  /*參數：id, sec, auto, videoid*/
  new Creative_video("video_Player", 0, 0, 'vTtcFMY7-vI');
})

Creative_video.js

/* 檔名：Creative_video.js */
/* 這邊以module方式撰寫，命名據不成文規定，大寫首字 */
class Creative_video{
    player = null;
    stateDone = false;
    firstPlay = true;
    id = null;
    sec = null;
    auto = null;
    videoid = null;
    
    constructor(id, sec, auto, videoid) {
        this.id = id;
        this.sec = sec;
        this.auto = auto;
        this.videoid = videoid;
       /* 判斷 YT 是否被定義了 */
        if(typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
            this.getYoutubeApi();
            /* 因為youtube API 會直接執行window.onYouTubeIframeAPIReady這支，官方有提到 */
            window.onYouTubeIframeAPIReady= ()=> {
                this.YouTubePlayer();
            }
        } else {
            window.onYouTubeIframeAPIReady= ()=> {
                this.YouTubePlayer();
            }
        }
    };
    getYoutubeApi= ()=> {
        /*This code loads the IFrame Player API code asynchronously.*/
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    };
    YouTubePlayer= ()=> {
        this.player = new YT.Player(this.id, {
            width: '100%',
            height: '100%',
            playerVars: {
                start: this.sec,
                rel: 0,
                fs: 1,
                autoplay: this.auto
            },
            videoId: this.videoid,
            events: {
                onReady: () => {
                    console.log('player is Ready');
                    /* 這邊我有使用自己客製化的外部function isMobile() */
                    /* 裝置是電腦，則自動播放 */
                    if (!isMobile()) {
                      this.player.setVolume(50);
                      this.player.playVideo();
                    }
                },
                onStateChange: (event)=> {                    
                    this.onStateChange(event);
                },
                onError: (event)=> {
                    this.catchError(event);
                }
            }
        });
    };
    onStateChange= (event)=> {
        /* 影片記點擊事件 */
        if (!this.stateDone && event.data === 1 && this.firstPlay) {
            /* 記載第一次播放點擊  */
            this.firstPlay = false;
        }
        if (event.data === 0) {
            /* 記載播放完畢 */
            this.stateDone  = true;
        }
        if (this.stateDone && event.data === 1) {
            /* 記載播放暫停 */
            this.stateDone  = false;
        }
    };
    catchError= (event)=> {
        if(event.data == 100) console.log("error");
    };
}

export default Creative_video;

如果使用上述有問題

可以看一下你的.babelrc檔，我有使用babel-plugin-transform-class-properties
這套件簡單層面來看就是，你可以將狀態、參數寫在constructor之前來做管理，以及reset
一般的寫法是不准許在constructor之前寫下任何東西的！一定要在裡面做宣告！

{
  "presets": ["env","stage-2"],
  "plugins": [
    "babel-plugin-transform-class-properties",
    "transform-async-to-generator"
  ]
}

補充

很多面試官一定會詢問：你知道 arrow function 的使用方法嗎？

method

targetGetA() {
  console.log(this); 
  return this.targrt;
};
targetGetB= ()=>{
  console.log(this);
};

上述targetGetB 就是一個arrow的使用

差別就是在引入一個第三方套件(JQuery)時

JQuery

1
2
3

/* 使用amimate的callback函數 */
$('html,body').animate({ scrollTop: $(anchor).offset().top }, 600, this.targetGetA);
$('html,body').animate({ scrollTop: $(anchor).offset().top }, 600, this.targetGetB);

你會發現這兩個this指向不同
targetGetA指向html和body
螢幕快照 2017-12-27 下午3.25.28.png
targetGetB指向是類別的名稱Nav_to_scroll_click_handler
螢幕快照 2017-12-27 下午3.28.58.png