前言：
如今朋友们对“js调用本地播放器播放”大体比较关注，姐妹们都想要知道一些“js调用本地播放器播放”的相关内容。那么小编同时在网络上搜集了一些关于“js调用本地播放器播放””的相关资讯，希望大家能喜欢，同学们一起来了解一下吧！一、需求
使用 webrtc 协议做直播，常见的音视频源是摄像头和麦克风，高级一点的就是桌面分享。虽然使用桌面分享可以实现推送本地流（原理就是对屏幕录制），但依赖本地播放器，并且观众可以看到主播的任何操作。
有一种伪直播需求，需要将本地视频无感知推送给用户，让用户感觉就像直播一样。
使用webrtc协议，大多数情况是在浏览器中做主播端。众所周知，出于安全和隐私的原因，Web 应用程序不能直接访问用户设备上的文件。那么如何将本地视频源进行加载到浏览器并推送出去呢？
二、核心API
HTMLCanvasElement.captureStream()
该方法返回一个CanvasCaptureMediaStream实时视频捕获的画布。
使用例子：
//获取所需要截取媒体流的canvas elementvar canvasElt = document.querySelector('canvas'); // 或者 video 标签//截取到媒体流var stream = canvasElt.captureStream(25); // 25 FPS//使用媒体流// E.g.使用RTCPeerConnection来传输给其它的电脑// 下面的pc是其他地方创建的一个RTCPeerConnectionpc.addStream(stream);通过以上例子，是不是恍然大雾。
此时我们的方案可以是：
上传一段视频到服务器或者云存储使用 video 标签加载视频使用 captureStream 捕获视频流使用 addStream 将视频流发布
此时解决了推送视频流，但是要推送本地视频怎么做呢？
相关学习资料推荐，点击下方链接免费报名，先码住不迷路~】
音视频免费学习地址：FFmpeg/WebRTC/RTMP/NDK/Android音视频流媒体高级开发
【免费分享】音视频学习资料包、大厂面试题、技术视频和学习路线图，资料包括（C/C++，Linux，FFmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以点击788280672加群免费领取~
三、最终解决方案
出于安全和隐私的原因，Web 应用程序不能直接访问用户设备上的文件。如果需要读取一个或多个本地文件，可以通过使用 input file 和 FileReader 来实现。虽然 FileReader 可以读文件，但是需要经过base-64编码，如果读大文件肯定会影响效率。所以我们只能考虑 input file， 可以使用 URL.createObjectURL 对视频进行预览。
那么我的最终方案就是使用 captureStream + input file预览 模式来解决这个问题。
简要代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src=";></script></head><body> <video width="500" controls> <source src="my_video.mp4" id="video_here"> </video> <input type="file" name="file[]" class="file_video" accept="video/*"> <script> $(document).on("change", ".file_video", function (evt) { var $source = $('#video_here'); $source[0].src = URL.createObjectURL(this.files[0]); $source.parent()[0].load(); }) </script></body></html>四、总结通过以上步骤，我们可以总结如下步骤：
使用 input 标签进行文件选择使用 video标签 配合 input标签 进行视频预览使用 captureStream 捕获视频流使用 addStream 将视频流发布
原文
标签： #js调用本地播放器播放 #jquery网页提示音
