最近因爲要用到傾斜攝影模型，需要在地圖中播放視頻，在網絡上看了好多文章，其實都已經說明白了，但是因爲環境之類的問題，都沒能正常運行起來，總體來說，對於新手來說不太友好。
鑑於此，做了一個最簡單的Demo，資源已上傳到csdn，地址是https://download.csdn.net/download/dragonrxl/11568472
如何運行？
只需要將文件解壓縮後，放到容器裏面，例如tomcat，nginx之類的容器裏就好，我覺得最簡單的是php，裝好PHP後，在文件夾目錄裏面，
執行php -S localhost:4111
就可以在瀏覽器裏面輸入http://localhost:4111/playVideo.html訪問了
注意點
下面是html文件的代碼，很簡單，有一個注意點是video標籤用上了muted(靜音屬性)，爲什麼用它呢？用了它之後，播放代碼videoElement.play();就可以立即執行了，不知爲何，只要作爲材質視頻就無法自動播放。
這樣子有個問題，就是視頻沒有聲音了，可能不符合你的要求，那怎麼辦呢？把muted屬性刪除掉，然後將videoElement.play();代碼放到一個延時執行函數裏，或者通過異步函數裏面，只要加載完成就播放。
簡單說下延時執行函數使用setTimeout就可以，例如:setTimeout(function(){videoElement.play();}, 3000);
這樣子三秒後執行，時間不夠就5秒或者更長，異步函數我沒試驗，自己動手看看吧。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>播放本地MP4文件的視頻模型渲染</title>
<script src="Build/Cesium/Cesium.js"></script>
<style>
@import url(Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
.cesium-widget-credits{ display:none} /** 隱藏版權信息 **/
.cesium-viewer .cesium-widget-credits{ display:none }
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<video id="trailer" muted autoplay loop crossorigin controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
<script>
var viewer = new Cesium.Viewer('cesiumContainer', {
geocoder: false,//是否顯示geocoder小器件，右上角查詢按鈕
homeButton:false,//是否顯示Home按鈕
sceneModePicker:false,//是否顯示3D/2D選擇器
baseLayerPicker:false,//是否顯示圖層選擇器
navigationHelpButton:false,//是否顯示右上角的幫助按鈕
animation:false,//是否創建動畫小器件，左下角儀表
creditContainer:"cesiumContainer",// 對應上面div的ID
timeline:false,//是否顯示時間軸
fullscreenButtion:false,//是否顯示全屏按鈕
vrButton:false,
selectionIndicator : false,//是否顯示選取指示器組件
});
// 上面配置選項可以控制部分控件是否顯示
viewer.scene.debugShowFramesPerSecond = true;// 顯示幀率
/** 默認使用bing地圖，轉換爲google地圖開始 **/
var google = new Cesium.UrlTemplateImageryProvider({
url : 'http://mt0.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}',
tilingScheme : new Cesium.WebMercatorTilingScheme(),
maximumLevel : 20
});
viewer.imageryLayers.addImageryProvider(google);
/** 默認使用bing地圖，轉換爲google地圖結束 **/
/** 開始添加立方體開始 ***/
var videoElement = document.getElementById('trailer');//獲得video對象
videoElement.play();
var redBox = viewer.entities.add({
name: 'my first box',
position: Cesium.Cartesian3.fromDegrees(116.812167,36.550532, 1.0),
box: {
dimensions : new Cesium.Cartesian3(10.0, 5.1, 10.0),
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
material: videoElement,
}
});
viewer.zoomTo(viewer.entities);
/** 開始添加立方體結束 ***/
</script>
</body>
</html>