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

最后的效果

来源：oschina

链接：https://my.oschina.net/u/4327970/blog/3337376

标签

webm

entity

html5

theora

vp8