# 差別在哪？影片播放標籤`<video>` VS. `<iframe>`

###### tags: `HTML`, `CSS`

CodePen示範：https://codepen.io/J_u_d_y/pen/VwEQzXp

## 1. 如果播放 mp4 影片：HTML5`<video>` + `<source>` 標籤

`<video>`標籤裡面再包一層`<source>`標籤去放影片路徑。

路徑可以是相對路徑或是絕對路徑

> 參考資料：**[Not able to dynamically change source of the HTML5 Video with Javascript](https://stackoverflow.com/questions/66539029/not-able-to-dynamically-change-source-of-the-html5-video-with-javascript)
[W3school HTML Video](https://www.w3schools.com/html/html5_video.asp)**

<video class="video" id="vid" controls autoplay>
   <source id="src" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
</video>
<button id="change">Change the video</button>

### 點擊「change」按鈕後替換成另一支影片

// mp4
const v = document.querySelector("#vid");
const s = document.querySelector("#src")
const changeMp4 = document.querySelector(".change")

changeMp4.onclick = changeVideo;

function changeVideo() { 
   s.src = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
   v.load();
   v.play();
   console.log(s,v);
}

影片播放要使用 `play()`，

特別注意的是，一旦改變影片路徑後，必須要先`load()` 再`play()` ，

這樣 `<video>` 才會吃到更新後的影片路徑播放新影片。

如果沒有進行 `load()`，即使路徑確實有更換，但是影片還是會播放舊的。

### if else 判斷式播放/暫停

除了替換影片，也可以很直覺的用同一個按鈕切換，判斷影片現在是播放中還是暫停，

但要特別注意 if 括號內條件是「paused」，是過去式當形容詞的寫法。

 
const pause = document.querySelector(".pause")

pause.onclick=playPause;

function playPause() { 
  if (v.paused) 
    v.play(); 
  else 
    v.pause(); 
}

## 2. 如果播放 YouTube 影片：用 `<iframe>` 標籤

影片路徑是直接放在 `<iframe>` 標籤上的 `src` 屬性，這點和 `<video>` 不一樣。

Youtube 影片網址不是複製瀏覽器上面的網址，必須先點「分享」，再按「嵌入」，去複製 embed 的網址。


<iframe class="videoYT" id="videoYT" 
src="https://www.youtube.com/embed/MXC_d42b-MU" 
title="YouTube video player" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
allowfullscreen>
</iframe>

<button id="changeBtn">Change YouTube video</button>

// YouTube
const videoYT = document.querySelector("#videoYT");
const changeBtn = document.querySelector("#changeBtn");

changeBtn.addEventListener("click", function(){
  videoYT.setAttribute("src", "https://www.youtube.com/embed/AmmFD2OIs_k?start=355");

});

使用 `<iframe>` 嵌入 Youtube 影片可以直接使用 Youtube 的播放器控制，所以不需使用 play()和 load()。

## 3. 取得路徑的寫法差異： `vidSrc.src` 和 `vidSrc.getAttribute("src")`

:::info
`vidSrc.src` 和 `vidSrc.getAttribute("src")` 通常抓到的值是一樣的，但是有些時候不一樣！
:::

**如果今天影片路徑是放在本地端的mp4**

**我希望按鈕點下去可以根據當下的影片網址為何，切換成另一個影片網址。**

點擊按鈕切換影片，如果當下正在播放的是 60fps.mp4 ，就切換成 30fps.mp4 ，反之亦然。

changeBtn.addEventListener("click", function(){


    if(vidSrc.getAttribute("src") == "media/pexels-lam-loi-2455151-1920x1080-30fps.mp4"){
        vidSrc.setAttribute("src", "media/pexels-matthias-groeneveld-2882624-1920x1080-60fps.mp4")
        vid.load(); 
        vid.play();
    }else if(vidSrc.getAttribute("src") == "media/pexels-matthias-groeneveld-2882624-1920x1080-60fps.mp4"){
        vidSrc.setAttribute("src", "media/pexels-lam-loi-2455151-1920x1080-30fps.mp4");
        vid.load(); 
        vid.play();
    }
})

- #### `vidSrc.src` 抓到的是解析過的「絕對路徑」：

原本路徑是寫成

media/pexels-lam-loi-2455151-1920x1080-30fps.mp4

但是用 Live Server 檢查會發現，網址變成：

http://127.0.0.1:5500/media/pexels-matthias-groeneveld-2882624-1920x1080-60fps.mp4

前面多了 `http://127.0.0.1:5500` ，但若之後把把網站上傳到 github，那這個前綴也會變。

無法預測解析出來完整路徑是什麼。

- #### `vidSrc.getAttribute("src")` 抓到的才是「原始相對路徑」：

media/pexels-lam-loi-2455151-1920x1080-30fps.mp4

if else 判斷式內要放 `vidSrc.getAttribute("src"`) 才能確保進行正確比較。

就是因為發現點擊後影片始終沒有切換，才發現 if() 括號內，如果寫成：

vidSrc.src == "media/pexels-lam-loi-2455151-1920x1080-30fps.mp4"

會回傳 false。

因為：

http://127.0.0.1:5500/media/pexels-matthias-groeneveld-2882624-1920x1080-60fps.mp4

不等於

media/pexels-lam-loi-2455151-1920x1080-30fps.mp4

**用瀏覽器 Console 檢查可以看出差異。**


意外發現取值微妙的差異，紀錄起來。