最近因为要用到倾斜摄影模型，需要在地图中播放视频，在网络上看了好多文章，其实都已经说明白了，但是因为环境之类的问题，都没能正常运行起来，总体来说，对于新手来说不太友好。
鉴于此，做了一个最简单的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>
1416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
