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

Upload Youtube

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

程式碼

index.html
1
2
3
4
5
6
7
8
9
10
11
12
<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>

[ES6] 異步操作 async 函數

Async 函数是什么?

一句话,它就是 Generator 函数的语法糖。
但是Generator 還是太複雜

async函数:

1
2
3
4
5
6
const asyncReadFile = async function () {
const afile = await readFile('/etc/fstab');
const bfile = await readFile('/etc/shells');
console.log(afile.toString());
console.log(bfile.toString());
};

[ES6] Class 語法,和 Extend 延伸實例

首先依照這個資源,瞭解 ECMAScript 6 class

ECMAScript 6 入门:https://es6.ruanyifeng.com/#docs/class
Javascript 物件導向子類和父類的應用等
因此開啟了我的深入淺出論文?(又臭又長的文章XD)

我寫的範例:

這邊有jsbin連結

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
class People {
constructor(height, money) {
this.height = height;
this.money = money;
}
work() {
console.log('I am working');
}
play() {
console.log('I am playing');
}
//info 可以先不用看
info() {
console.log('我身高',this.height, '我有',this.money);
}
}
//----------------特殊舉例-可以先不用理會-------------------
let cMan =new People ('0cm','0元');
//----------------aMan-object---------------------
class aMan extends People {
swim() {
console.log('aMan','I am swimming');
}
};
//----------------new-aMan------------------------
let poolMan = new aMan('165cm', '5億');
//----------------bMan-object---------------------
class bMan extends People {
constructor(height, money, face) {
super(height, money);
this.face = face;
}
swim() {
console.log('bMan','I am swimming');
}
talk() {
console.log('bMan','I am talking');
}
//info 可以先不用看
info() {
console.log('我身高有',this.height, '我錢有',this.money,'我臉很',this.face);
}
};
//----------------new-bMan------------------------
let richMan = new bMan('195cm','500億','帥');
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×