原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Video.html&label=All

示例介绍：将一个视频（big-buck-bunny_trailer）作为材质贴图。视频默认自动播放并循环效果如下图所示：

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
  @import url(../templates/bucket.css);

  #trailer {
    position: absolute;
    bottom: 75px;
    right: 0;
    width: 320px;
    height: 180px;
  }
</style>

<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay">
  <h1>加载中...</h1>
</div>
<div id="toolbar"></div>

<!-- muted：静音 autoplay：自动播放 loop：循环播放 crossorigin： 支持跨域 
  controls：显示播放控件-->
<video id="trailer" muted="" autoplay="" loop="" crossorigin="" controls="">
  <!-- <source>：提供多种视频格式（.webm、.mp4、.mov），确保浏览器兼容性。 -->
  <source src="https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.webm" type="video/webm">
  <source src="https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.mp4" type="video/mp4">
  <source src="https://cesium.com/public/SandcastleSampleData/big-buck-bunny_trailer.mov" type="video/quicktime">
  Your browser does not support the <code>video</code> element.
</video>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  skyBox: false,
  sceneModePicker: false,
  baseLayerPicker: false,

  showRenderLoopErrors: false,
  shouldAnimate: true,
});
viewer.cesiumWidget.creditContainer.style.display = "none";

// 视频元素既作为 WebGL 纹理（材质），也可显示在页面上。
const videoElement = document.getElementById("trailer");

const sphere = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-79, 39, 1000),
  ellipsoid: {
    radii: new Cesium.Cartesian3(1000, 1000, 1000),
    material: videoElement,//将 <video> 元素作为材质，视频帧动态渲染到球体表面。
  },
});

viewer.trackedEntity = sphere;

/**
 * 时钟同步控制:默认情况下，视频正常播放，仅显示当前帧的内容。
 * 我们可以通过使用 VideoSynchronizer 将视频与场景时钟同步。
 */
let synchronizer;
Sandcastle.addToggleButton("Clock synchronization", false, function (checked) {
  if (Cesium.defined(synchronizer)) {
    synchronizer = synchronizer.destroy();
    videoElement.playbackRate = 1.0;
    return;
  }

  // synchronizer：VideoSynchronizer 对象，管理视频与时钟的同步。
  synchronizer = new Cesium.VideoSynchronizer({
    clock: viewer.clock,
    element: videoElement,
  });
});

/**
 * 图像重复控制:由于这只是图像素材，我们可以在每个方向上修改视频重复的次数。
 */
let isRepeating = true;
Sandcastle.addToggleButton("Image Repeat", isRepeating, function (checked) {
  isRepeating = checked;
});

// material.repeat:控制视频纹理的平铺，Cartesian2 定义 x/y 方向重复次数
sphere.ellipsoid.material.repeat = new Cesium.CallbackProperty(function (
  time,
  result
) {
  if (!Cesium.defined(result)) {
    result = new Cesium.Cartesian2();
  }
  if (isRepeating) {
    result.x = 8;
    result.y = 8;
  } else {
    result.x = 1;
    result.y = 1;
  }
  return result;
},
false);

Sandcastle.addToggleButton("Video Overlay", true, function (checked) {
  if (checked) {
    videoElement.style.display = "";
  } else {
    videoElement.style.display = "none";
  }
});

// 旧版浏览器不支持 WebGL 视频纹理，请显示一个友好的错误提示。
viewer.scene.renderError.addEventListener(function () {
  if (!videoElement.paused) {
    videoElement.pause();
  }
  viewer.cesiumWidget.showErrorPanel(
    "This browser does not support cross-origin WebGL video textures.",
    "",
    ""
  );
});