技術標籤：3D引擎htmljavascript

嵌入視訊有2種方式，最常用就是把它給豎起來。這種方式就是畫一面牆，然後把視訊標籤當做紋理的來源，貼到上面去。

廢話不多說，直接上程式碼

html部分

<video id="myVideo" muted="" autoplay="" loop="loop" crossorigin="*" controls="">
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
      </video>
 

js部分

//首先獲取到視訊元素
    var videoElement = document.getElementById("myVideo");
    //在cesium中建立一個模型來承載視訊，使得視訊可以在該處進行播放
    var pArray = [
      113.122717,
      23.028762,
      224.546905094954552,
      113.122717 + 0.001,
      23.028762 + 0.001,
      224.526901883324383,
    ]; //牆面的2個點的經緯度和高度
    var instance = new Cesium.GeometryInstance({
      geometry: new Cesium.WallGeometry({
        positions: Cesium.Cartesian3.fromDegreesArrayHeights(pArray),
        minimumHeights: [150.5, 150.5], //最低位置。單位米
      }),
    });
    //將該材質設定為視訊，並給與模型
    var material = Cesium.Material.fromType("Image");
    material.uniforms.image = videoElement;

    var tileset = viewer.scene.primitives.add(
      new Cesium.Primitive({
        geometryInstances: instance,
        appearance: new Cesium.MaterialAppearance({
          closed: false,
          material: material,
        }),
      })
    );

    let synchronizer = new Cesium.VideoSynchronizer({
      clock: viewer.clock,
      element: videoElement,
    });
    viewer.clock.shouldAnimate = true;

    videoElement.style.display = "none";
 

同上一篇博文所說，最後還需要時鐘同步。不然沒法做到隱藏video標籤的同時還能播放視訊

另外一種方式，參考

【CesiumJS】嵌入視訊之視訊投影_chengzhf的專欄-CSDN部落格