时间戳

首页 > 解决方案 > Threejs 对 2D 视频的响应能力

javascript - Threejs 对 2D 视频的响应能力

问题描述

我想在 three.js 中播放交互式 2D 视频。我想在调整浏览器窗口大小时保持视频纵横比。

我当前的代码

var camera, scene, renderer;

var texture_placeholder,
  distance = 500;

init();
render();

function init() {
  var container, mesh;
  container = document.getElementById('container');
  camera = new THREE.PerspectiveCamera(90, 1, 0.1, 50000);
  camera.target = new THREE.Vector3(0, 0, 0);
  scene = new THREE.Scene();
  var videoRatio = 16 / 9;
  var geometry = new THREE.PlaneBufferGeometry(1.7, 1);
  var video = document.createElement('video');
  video.width = 960;
  video.height = 540;
  video.autoplay = true;
  video.loop = true;
  video.mute = true;
  video.setAttribute('crossorigin', 'anonymous');
  video.src = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
  var texture = new THREE.VideoTexture(video);
  texture.minFilter = THREE.LinearFilter;
  texture.format = THREE.RGBFormat;

  var material = new THREE.MeshBasicMaterial({
    map: texture
  });

  video.onplay = function() {
    onWindowResize();
  }

  mesh = new THREE.Mesh(geometry, material);

  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({
    depth: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.appendChild(renderer.domElement);

  window.addEventListener('resize', onWindowResize, false);

  var playBtn = document.getElementById("play_btn").onclick = function() {
    console.log("[DEBUG] play button clicked");
    video.play();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }
}

function onWindowResize() {

  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  console.log("[DEBUG] onWindowResize");
}

function render() {
  requestAnimationFrame(render);
  update();
}

function update() {
  camera.updateProjectionMatrix();
  camera.position.z = 0.5;
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.render(scene, camera);
}
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/109/three.js"></script>
<button id="play_btn">play</button>
<div id="container"></div>

Codepen 演示：https ://codepen.io/mr1985/pen/OJVOKgY

目前，我正在使用 iframe 来解决这个问题，但我更愿意使用 three.js 来处理视频纵横比。这里是我的 iframe 供参考：

<style>
  .iframe-container {
    overflow: hidden;
    padding-top: 56.25%;
    position: relative;
  }

  .iframe-container iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

</style>
<div class="iframe-container">
  <iframe width="960" height="540" src="http://localhost:8000/mini_player.html" frameborder="0" allowfullscreen scrolling="no"</iframe>
</div>

任何帮助将不胜感激。

标签： javascriptcssvideothree.js

解决方案

删除以下行解决了桌面浏览器上的问题：

video.width = 960;
video.height = 540;

在移动设备上，我仍然有错误的比例。我添加了以下内容以不全屏播放视频：

video.setAttribute( 'playsinline' , '' );.

推荐阅读