用局域網遠程文件共享的原理，輕輕松松就可以直接用電視訪問電腦里面的內容。 windows系統中，共享文件操作較為麻煩，還需要在電腦上設置，有時候還不一定能成功。 接下來給大家分享來自網友＠一朵奇葩花ル自用的電視看電腦視頻的方法，超級簡單，屢試不爽！藍光高清、4K、H.265，不用U盤直接看。———————————————————————————— 超級常見、超級實用的工具：當貝桌面——http://www.dangbei.com/zhuomian/第一步：安裝并打開當貝桌面。

時尚時尚最時尚的當貝桌面，操作簡單，界面清爽還可以自定義桌面壁紙，裝上一個，就可以讓你爽到不能呼吸。

第二步：打開當貝桌面的第二分屏，鎖定上圖“文件快傳”選項，并打開

第三步：根據提示，訪問屏幕中出現的網址，奇葩花ル的盒子，網址是192.168.1.134:5566

第四步：在網頁端，直接拖拽或者點擊瀏覽選項，選擇視頻文件上傳就行，秒速上傳，速度快的不行不行的！

第五步：眨眼功夫，一部600多M的小短片就上傳成功。電視端屏幕上已經有該上傳的視頻文件的顯示。

第六步：選中推送的的視頻，選擇一款播放器，就可以打開看到，不要U盤，不用繁瑣的步驟，看本地視頻就是這么簡單！

電視或者盒子硬件足夠給力的話，藍光原盤、4K超高清，只要你能下載到的視頻，都可以越過U盤，通過當貝桌面，直接播放，再也不需要繁瑣的U盤插&拔步驟。 片源方面，這里推薦幾個優質片源下載地址：

3D片源下載：http://www.znds.com/bbs-45-1.html

4K片源下載：http://www.znds.com/bbs-196-1.html

最新高清電影片源下載：http://www.znds.com/bbs-101-1.html

Offer 駕到，掘友接招！我正在參與2022春招打卡活動，點擊查看活動詳情。”

前提： 公司項目中上傳的視頻編碼格式不一，但是在瀏覽器播放中，卻出現了黑屏（有聲音）的情況，即使是MP4格式的視頻，也存在無法播放，查詢一番，了解到chrome瀏覽器的video標簽僅對部分格式的視頻支持播放

通常我們使用MP4格式，但是MP4又分為“1.MPEG4(DivX)”、“2.MPEG4(Xvid)”、“3.AVC(H264)”三種類型。其中只有H264類型的視頻才能進行html播放

標簽所支持的視頻格式和編碼：

MP4 = MPEG 4文件使用 H264 視頻編解碼器和AAC音頻編解碼器
WebM = WebM 文件使用 VP8 視頻編解碼器和 Vorbis 音頻編解碼器
Ogg = Ogg 文件使用 Theora 視頻編解碼器和 Vorbis音頻編解碼器

注釋：Internet Explorer 8 以及更早的版本不支持 video 標簽。

使用FFMPEG轉碼

預覽地址： 642134542.github.io/vue-ffmpeg/

1、原理：

ffmpeg.wasm 是 FFmpeg 的純 WebAssembly / JavaScript 端口。它支持在瀏覽器內錄制、轉換和流式傳輸視頻和音頻。

Webassembly 的出現為前端轉碼提供可能

2、按照官網配置

2.1 npm安裝

npm install @ffmpeg/ffmpeg @ffmpeg/core

2.2 html

<div>

   <h3>Upload a video to transcode to mp4 (x264) and play!</h3>

   <video id="output-video" controls ></video><br/>

   <input type="file" id="uploader">

   <p id="message"></p>

  </div>

2.3 js

const { createFFmpeg, fetchFile } = FFmpeg;

const ffmpeg = createFFmpeg({

    corePath: 'https://unpkg.com/@ffmpeg/core@0.8.5/dist/ffmpeg-core.js',

    log: true,

 });

 const transcode = async ({ target: { files } }) => {

   const message = document.getElementById('message');

     const { name } = files[0];

      message.innerHTML = 'Loading ffmpeg-core.js';

     await ffmpeg.load();

      ffmpeg.FS('writeFile', 'name', await fetchFile(files[0]));

      message.innerHTML = 'Start transcoding';

     await ffmpeg.run('-i', 'name', 'output.mp4');

      message.innerHTML = 'Complete transcoding';

     const data = ffmpeg.FS('readFile', 'output.mp4');

     const video = document.getElementById('output-video');

      video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));

   }

   const elm = document.getElementById('uploader');

   elm.addEventListener('change', transcode);

相關學習資料推薦，點擊下方鏈接免費報名，先碼住不迷路~】

音視頻免費學習地址：FFmpeg/WebRTC/RTMP/NDK/Android音視頻流媒體高級開發

【免費分享】音視頻學習資料包、大廠面試題、技術視頻和學習路線圖，資料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以點擊788280672加群免費領取~

3、結果

頁面可以正常加載和上傳，但是在轉碼過程中報錯了

ReferenceError: SharedArrayBuffer is not defined，

所以需要解決SharedArrayBuffer報錯

兼容性查看caniuse.com/?search=Sha…

可以看到SharedArrayBuffer是支持谷歌瀏覽器79版本以上

那么，為什么這里會出現SharedArrayBuffer is not defined的報錯信息呢

經過一番百度和查看issue, 是因為谷歌瀏覽器的安全策略機制改變了
2017.7月（Chrome 60）引入 SharedArrayBuffer。
2021.7月（Chrome 92）限制 SharedArrayBuffer只能在 cross-origin isolated 頁面使用。
Android Chrome 88 也進行了同樣的限制。

從上述結論中，可以知道在60-91的版本的瀏覽器是可以正常打開的

那么92版本的呢

在vue-cli開發環境中我們可以再vue.config.js中配置

devServer: {
  headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp",
    },
}

4、效果

在控制臺中可以看到讀取文件和轉碼進程，

而且頁面可以正常的顯示視頻并播放

5、優化：

5.1、corePath

createFFmpeg中的corePath的地址是cdn在線的，這里我們需要換成自己的本地資源，

但是使用import一直報錯

估計是相關依賴并沒有找到，npm install還是不行

只好把包里的ffmpeg-core.js、ffmpeg-core.wasm和ffmpeg-core.worker.js放在public中

5.2、加載

讀取文件和轉碼的時間比較長，所以我們需要增加加載層和進度條

ffmpeg.setProgress(({ ratio }) => {

  console.log(ratio);

  this.percentage = Math.floor(ratio * 100)

  /*

  * ratio is a float number between 0 to 1.

  */

});

6、部署：

使用ip或者域名訪問，依舊會報錯SharedArrayBuffer is not defined，所以我們需要代理中配置請求頭

add_header Cross-Origin-Opener-Policy same-origin;

add_header Cross-Origin-Embedder-Policy require-corp;

但是還是存在報錯信息

解決辦法：

1、使用https代替http

2、使用chrome 60-91版本訪問

7、可能存在報錯信息

7.1、caught (in promise) Error: Oops, something went wrong in FS operation

解決辦法： 不要使用中文名稱，將name可以進行轉義

7.2、Error: ffmpeg.FS('readFile', 'output.mp4') error. Check if the path exists

解決辦法：同問題1

7.3、github page無法設置header請求頭，預覽地址是如何解決SharedArrayBuffer報錯的

在Stack Overflow這個問題中 有個回答提供了解決方案 github.com/gzuidhof/co… 開發者只需要將coi-serviceworker.js在index.html引入即可

<script src="coi-serviceworker.js"></script>

參考鏈接：

1、juejin.cn/post/701696…

原文 ffmpeg實現web在線轉碼播放 - 掘金

地視頻同步觀看軟件可以兩個或更多的人在不同的地方同時觀看視頻。這類軟件通常具有同步播放功能，使所有觀看者能夠在同一時間看到相同的內容。這對于觀看電影、電視節目或進行視頻會議非常方便。它還可以與聊天工具集成，使觀看者可以在觀看視頻時進行交流。

今天給大家介紹一款功能強大的異地視頻同步觀看軟件——**VideoTogether**, 它支持全平臺使用，通過創建房間和加入房間實現與自己的朋友在線同步觀影,極大地提升異地觀影體驗。VideoTogether同時支持油猴插件，可以輕松借助瀏覽器實現異地同時看網頁版視頻，這樣無論相隔多遠，都能讓你和家人朋友一起在線看視頻，除此之外，VideoTogether同樣支持播放本地的視頻。

下面，即刻就手把手教大家如何在電腦網頁端實現異地視頻同步觀看，Let's begin！

1 安裝VideoTogether瀏覽器插件

此處為了演示，在同一臺電腦上分別在 Edge 和 Chrome 瀏覽器中分別裝上這款插件，插件無需下載，直接在應用商店搜索一鍵安裝。

注意：Edge瀏覽器插件可以直接搜索安裝，而Chrome瀏覽器需要魔法前往應用商店安裝，因此建議你和朋友都使用Edge瀏覽器。

2 創建房間與加入房間

插件安裝好后，我們在A端打開視頻播放網頁，可以在瀏覽器的右下角看到一個小圖標，當我們點擊小圖標，就會彈出工具的窗口，輸入自定義**房間**和**密碼**，點擊**建房**就完成 “開房” 的步驟了（示例中房間：jike，密碼：jike）。

在B端的瀏覽器，通過點擊小圖標，在彈出工具的窗口，輸入**房間**和**密碼**，點擊**加入**，等待片刻，即可同步A端的視頻播放網頁與進度（示例中房間：jike，密碼：jike），這樣就實現了同步看片的需求，這里即刻以某小網站電影為例，大家也可以將其運用到包括B站等其他任何視頻網站中。

VideoTogether也支持同步播放本地視頻，A端和B端同時打開以下頁面上傳視頻即可進行觀看：

https://2gether.video/zh-cn/