cesium播放视频

2021-04-08 15:34:45 阅读：214 来源： 互联网

标签：视频元素 material var Cesium cesium new 播放

转载 https://blog.csdn.net/A873054267/article/details/86239025

实现原理：

html中声明一个vedio元素来承载视频，但是不必设置元素的宽高，然后再js中获取该元素，并把该元素赋值给一个实体的材质

此种方式适用于primitve方式加载的，官网的是加载到模型上，此后再做研究。

html中：

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

js中：

//首先获取到视频元素

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)
});

pic_05e452eb.png

标签：视频,元素,material,var,Cesium,cesium,new,播放
来源： https://www.cnblogs.com/hustshu/p/14632446.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

cesium播放视频