当前位置: 首页 > 知识库问答 >
问题:

前端 - 我有2个视频,我想实现保证2个视频都下载完成再播放,我可以这样合并视频吗?

益源
2023-08-03
    const videoRef = $('.home_bg_logo_box_video_1')[0] as HTMLVideoElement;    const videoURL = 'video/1.mp4';    // 加载视频完成后再播放    fetch(videoURL)      .then((response: any) => response.blob())      .then((blob: Blob) => {        init(blob);      });    Promise.all([fetch('video/1.mp4'), fetch('video/2.mp4')])      .then((responses) => {        // 合并2个视频 生成一个新的视频        return Promise.all(responses.map((response) => response.blob()));      })      .then((blobs) => {        console.log(blobs);        // blobs 是一个包含了两个blob的数组        // 将两个视频合并成一个新的视频        const blob = new Blob(blobs, { type: 'video/mp4' });        init(blob);      });    function init(blob: Blob) {      videoRef.src = URL.createObjectURL(blob);      // 当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时,会发生 canplaythrough 事件。      videoRef.addEventListener('canplaythrough', () => {        $('.home_bg_logo_box_loading').css({          display: 'none',        });        videoRef.play();      });      videoRef.addEventListener('ended', function () {        // 播放结束后的操作 从第N秒开始播放        videoRef.currentTime = 8;        videoRef.play();      });    }

好像没用,还是只展示第一个的,我打印的blob是有2个的。js不能做到合并吗?

共有2个答案

司浩壤
2023-08-03

https://segmentfault.com/q/1010000018680806

公孙宏畅
2023-08-03

先在服务器端先合并视频,然后在客户端播放合并后的视频不就好了。前端实现可以,但是要用一些专门的库,比如 ffmpeg.js,但是前端来处理会有性能问题。
或者:你只是想在一个视频播放完后立即播放另一个视频这样不就好了,监听第一个视频播放完没

videoRef.addEventListener('ended', function () {  // 播放结束后的操作  videoRef.src = URL.createObjectURL(secondBlob);  videoRef.play();});
 类似资料:
  • 我的应用程序有一个片段,播放一秒钟长的视频。播放完视频后,用户必须按下一个按钮,然后应该播放一个新的视频。在播放第二个视频之前,my main activity加载、创建一个新片段并创建新的Exoplayer实例。 我第一次播放视频时,一切都按预期进行。然而,如果我想播放第二个视频,它将显示第一个视频最后一帧的冻结图像,并播放第二个视频的声音。这个bug不出现在Android8(API Level

  • 只是想知道是否有人能告诉我这是怎么回事。当我播放视频时,我可以听到音频,但视频不显示。这是我的代码,我是初学者

  • 我有一个URL:-“http://fitnation.theclientdemos.com:9000/media/uploads/videoplayback_3_jtvchi1”当我在浏览器上运行这个URL时,我的VDO开始下载。 请帮助在视图中播放此视频(让视图名称为:-vdoView) 为此,我尝试以下代码:-

  • 简单实现视频的边下载边播放功能。 原理是这样的: 在iOS本地开启Local Server服务,然后 MPMoviePlayerController 请求本地Local Server服务。本地Local Server服务再不停的去对应的视频地址获取视频流。本地Local Server请求的时候,就可以把视频流缓存在本地。 作者说:网上看到的教程没有相对应的demo。就写一个希望对初学者有所帮助。大

  • 那么如何在iPhone上播放完一个视频后直接播放一个视频呢?我把这个 NSString*filepath=[[NSBundle mainBundle]pathforresource:@“movie”oftype:@“m4v”];NSURL*fileurl=[NSURL fileurlwithpath:filePath];MPMoviePlayerController*moviePlayerCont

  • 以下是在视频框中播放2个mp4视频的代码。 gst-launch-1.0 filesrc location=1。mp4!decodebin!队列视频转换!视频框边框alpha=0右=-100!videomixer name=混音!视频转换!autovideosink文件rc位置=2。mp4!decodebin!队列视频转换!视频框边框alpha=0左=-100!混合 我已尝试使用此代码播放3个视频