• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

cesium播放视频

开发技术 开发技术 2周前 (04-08) 6次浏览

转载 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


程序员灯塔
转载请注明原文链接:cesium播放视频
喜欢 (0)