wordpreess直接播放mp4改由peertube串流系統

wordpress有個外掛「Super Video Player」能播放mp4影音檔案,但是很耗流量,若放在雲端費用將會很高;因此有必要考慮改用串流方式播放,可以節省一些流量,有個peertube串流系統很棒,也可以安裝容器,我們公司使用到現在,很穩定又好用,安裝方式請按這裡

朋友wordpress網站使用 super video player 播放mp4,可以隱藏下載選項,讓麻瓜使用者不是很容易取得(麻瓜以上就很容易了);若要改成 peertube,則會看到下載選項,這樣朋友就不願意了,於是我爬文爬丫爬,最後發現只要加上一行,也能做到與super video player 一樣,讓麻瓜不容易取得/下載檔案。

[root@firewall ~]# docker exec -it peertube_peertube_1 bash
root@770eb53d9cf6:/app# find .|grep embed.html
./client/dist/standalone/videos/test-embed.html
./client/dist/standalone/videos/embed.html
./client/src/standalone/videos/embed.html
./client/src/standalone/videos/test-embed.html
root@770eb53d9cf6:/app# vi ./client/dist/standalone/videos/embed.html

## 編輯 embed.html ,在head之前加上以下語法,然後退出重新執行peertube容器
# 出處 https://framacolibri.org/t/how-to-disable-context-menu-for-peertube/10998
<style> .vjs-contextmenu-ui-menu { display: none !important; } </style>

## 編輯 embed.html ,body 改成以下這樣
<body id="custom-css" class="standalone-video-embed" oncontextmenu="return false" onselectstart="return false" ondragstart="return false">

另外peertube 連結要嵌在網頁上,只要滑鼠移到影片上,右鍵選「複製嵌入程式碼」,再稍微修改一下即可。


我使用 「aspect-ratio : 16/9」方式自動會依照網頁大小而微調 ,很方便

<iframe src="https://peertube.test.com.tw/videos/embed/1586a669-b649-4e3f-974c-ec4d42a0bf9e" style="aspect-ratio: 16/9;height: 100%; width: 100%;" frameborder="0" width="560" height="315" allowfullscreen="" sandbox="allow-same-origin allow-scripts"></iframe>

2023/08/20

後來發現peertube有個bug,就算網路正常撥放,chrome還是會出現轉圈圈的情況,但firefox不會,我後來發現乾脆先暫時停掉轉圈圈功能,一樣在head前加上一行。(很可惜peertube主要開發者很剛愎自用,以前就交手過了,所以我不會回報這問題,前幾週也有人反應,但都沒受到重視)

.vjs-loading-spinner{display:none!important;}

發表迴響