Cesium加載視頻

cesium加載視頻

   <video id="trailer" style="display: none" controls loop preload="auto" autoplay="autoplay" >
      <source src="../../static/d.mp4" type="video/mp4">
  </video>

第一種加載方式

    //首先獲取到視頻元素
    var videoElement = document.getElementById('trailer');
    //在cesium中創建一個模型來承載視頻，使得視頻可以在該處進行播放
     var pArray = [
         116.34453261995247, 39.996079774527296, 14.546905094954552,
         116.34453261396283, 39.99601663806494, 14.526901883324383
     ];
     var instance = new Cesium.GeometryInstance({
         geometry: new Cesium.WallGeometry({
             positions: Cesium.Cartesian3.fromDegreesArrayHeights(pArray),
             minimumHeights: [10.740020872891446, 10.740020872891446]
         })
     });
         // //將該材質設置爲視頻，並給與模型
     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
        })
    }));

     viewer.camera.setView({
         destination : Cesium.Cartesian3.fromDegrees(116.34453261995247, 39.996079774527296,300)
     });

第二種加載視頻投影

var videoElement = document.getElementById('trailer');
viewer.entities.add(
{
     rectangle: {
     	coordinates:  Cesium.Rectangle.fromDegrees(position[0], position[3], position[2], position[1]),
        material: videoElement, 
        outline:true,
        outlineColor:Cesium.Color.BLACK.withAlpha(0.0),
        height : 1000.0*10,
        transparent : true
    },
    classificationType : Cesium.ClassificationType.BOTH
    });