用局域网远程文件共享的原理，轻轻松松就可以直接用电视访问电脑里面的内容。 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/