绿屏视频场景切换代码（附完整源码）

最新推荐文章于 2024-09-11 09:36:01 发布

一起学代码

最新推荐文章于 2024-09-11 09:36:01 发布

阅读量161

点赞数 2

文章标签： css3 html5

本文链接：https://blog.csdn.net/qq_41981237/article/details/141925886

版权

随着新媒体盛行，视频处理已成为热门话题

为了方便后期处理，前期拍照过程中会采用绿幕作为背景，因此，你会看到，你拍摄的戏码会出现在不同的场景中，巍峨的雪山，广袤的沙漠，蔚蓝的大海……那么，他是如何实现的呢？这里就不得不提到视频后期处理，利用视频软件，抠出绿幕人物，外加各种场景作为背景图进行合成，即可完成。但是，作为开发人员，我们探讨的核心不是教学剪辑软件，技术含量不高，提不起兴趣，本节我们学习如何利用程序实现，技术栈嘛！老规矩，还是前端，先看效果：
在这里插入图片描述

<!DOCTYPE html><html>  <head>    <style>      body {        background: black;        color: #cccccc;      }      input {        display: none;      }      label {            padding: 10px 20px;            background: orange;            color: #fff;            border-radius: 5px;            cursor: pointer;        }      div {
        margin: 20px 0;      }      video,img {        opacity: 0;        position: absolute;      }</style>    <script src="./static/main.js"></script>  </head>
  <body>    <h1>绿幕视频处理</h1>    <label for="file1" accept="video/*">选择绿幕视频</label><input type="file" id="file1" />    <label for="file2" accept="video/*">选择视频背景</label><input type="file" id="file2" />    <label for="file3" accept="image/*">选择图片背景</label><input type="file" id="file3" />    <div>      <video id="video" src="" controls="true" width="500" height="500" muted="true" autoplay="true" loop></video>      <video id="videobg" src="" controls="true" width="500" height="500" muted="true" autoplay="true" loop></video>      <img src="" width="500" alt="" id="img">    </div>    <div>      <canvas id="c1"></canvas>      <canvas id="c2"></canvas>      <canvas id="c3"></canvas>    </div>  </body>  <script>    let file1 = document.getElementById('file1')    let file2 = document.getElementById('file2')    let file3 = document.getElementById('file3')    let video = document.getElementById('video')    let videobg = document.getElementById('videobg')    let img = document.getElementById('img')
    file1.addEventListener('change', e => {      let url = URL.createObjectURL(e.target.files[0])      video.src = url      processor.doLoad()    })
    file2.addEventListener('change', e => {      let url = URL.createObjectURL(e.target.files[0])      videobg.src = url    })
    file3.addEventListener('change', e => {      let url = URL.createObjectURL(e.target.files[0])      img.src = url      processor.type = 1    })</script></html>

一起学代码

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
绿屏视频场景切换代码（附完整源码）

为了方便后期处理，前期拍照过程中会采用绿幕作为背景，因此，你会看到，你拍摄的戏码会出现在不同的场景中，巍峨的雪山，广袤的沙漠，蔚蓝的大海……那么，他是如何实现的呢？这里就不得不提到视频后期处理，利用视频软件，抠出绿幕人物，外加各种场景作为背景图进行合成，即可完成。但是，作为开发人员，我们探讨的核心不是教学剪辑软件，技术含量不高，提不起兴趣，本节我们学习如何利用程序实现，技术栈嘛！
复制链接

扫一扫