Supermap/Cesium 开发心得----本地视频接入播放

在三维中，为了增长现实感、给人一种带入感，咱们会采起接入视频的方式来实现，那么如何接入视频呢？

因为没有截至写文章为止，我没有视频流数据，因此只能采起本地视频文件的方式来作。

本文介绍结束视频的其中一种方法--------建立一个Entity实体做为承载视频的载体，将视频做为一种Entity的材质。

首先：在HTML中接入视频

<video id="trailer" muted autoplay loop crossorigin controls>
    <source src="LV.mp4" type="video/mp4"> Your browser does not support the <code>video</code> element. </video>

这段代码中 muted标识让视频静音播放，原本这个组件设置的属性时静音、自动播放且循环，可是实际上当我把视频接入进来的时候却不自动播放，因此须要手动给他播放。

可是想要播放视频，不是全部的视频都是能够播放的，须要符合HTML5标准的视频格式和编码才能播放，我一开始也是MP4文件，可是却不能播放，后来才知道是视频编码的问题，

MP4	MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM	WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg	Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

咱们须要转换成这些规定的格式，使用格式工厂对视频作转码操做

 

//视频播放
var videoElement = document.getElementById('trailer'); videoElement.play(); //开始播放

第二步：造实体贴材质

我才去造wall实体去贴，模仿街道的广告牌

造wall实体：

 

    var videoElement = document.getElementById('trailer');
    videoElement.play(); //开始播放

    view.entities.add({
        wall: {
            positions:[
                Cesium.Cartesian3.fromDegrees(116.372834749242,39.8914878935825,8),
                Cesium.Cartesian3.fromDegrees(116.372460907789,39.8914878935825,8)], //这里表征实际上是墙的底部的顶点 
            minimumHeights:[20,20], //这里表征的实际上是墙的最高的地方，以这个为例，可知，墙的底部是从位于8m高度的位置开始的，在高度为20m的位置结束的一面墙  
            material : videoElement, 
        } 
    })

 

最后的效果