Skip to content

WhiteRoom4/Video.js-YouTubeVideo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Video.js-YouTubeVideo

use Video.js show YouTube video

Video.js 是一款開源播放器,它是一個經典的 JS 播放器。

https://videojs.com/getting-started
https://ithelp.ithome.com.tw/articles/10209237
首先參考上述這兩篇文章,發現影片無法正常播放,顯示 No compatible source was found for this media. 的訊息。 猜測若要播放 YouTube 影片可能需要特定的兼容性資源,在搜尋一些文章後發現需要 Youtube.js 。

https://cdnjs.com/libraries/videojs-youtube
上述文章提供了 Youtube.js 的 CDN ,故在 index.html 新增此行:

<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.1/Youtube.min.js"></script>

再執行一次,發現還是無法正常播放,顯示 No compatible source was found for this media. 的訊息。

https://www.coder.work/article/1735660
繼續搜尋一些文章後發現,在 all.js 中,用 JS 來建立 Video.js 播放器物件: videojs('播放器nodeID',播放器設置,回呼函式);
第二個參數:播放器設置使用 sources 屬性設定影片連結時,也需要設定type: "video/youtube" ,才可以讓影片正常播放。

- 若想播放其他的 YouTube 影片,只要修改 sources 屬性的影片連結( src ),改成 src: "打算播放的 YouTube 影片網址",就可以變更影片。

PS:
發現有些 YouTube 影片可以正常播放,有些卻無法播放,顯示 Playback on other Websites has been disabled by the video owner. 的訊息。 針對這個問題爬文,發現那是因為有些影片擁有者不希望視頻在其他網站上播放,這些受到限制的影片目前沒有解決辦法。
https://www.quora.com/Is-there-a-work-around-on-embedding-YouTube-videos-without-getting-the-message-playback-on-other-websites-has-been-disabled

About

JavaScript 播放器: use Video.js show YouTube video

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published