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,
}
})
最后的效果
Supermap/Cesium 开发心得----本地视频接入播放的更多相关文章
- Supermap/Cesium 开发心得----定位
SuperMap的WebGL是基于开源JS库Cesium做的修改而形成的产品,理论上用起来大同小异,如果在有不一样的地方再看,基本上还是与Cesium的接口名称和结构是一样的. 定位方法有基于Cesi ...
- Supermap/Cesium 开发心得----动态散点图(波纹点/涟漪点)
在二维开发中,openlayers4 入门开发系列结合 echarts4 实现散点图,下图是GIS之家的效果图,那么在三维中,则可借助Entity来变相构造下图的效果. 思路: 构造实体ellipse ...
- Supermap/Cesium 开发心得----飞天动线的实现
在实际开发中,我遇到这样的问题,只给了两地点的坐标,要求会出从A地到B地的在天上飞的那种动态线 本质上动线的效果就是构造实体Entity中的polyline来实现,设置好材质,颜色和运动频率 具体实现 ...
- Supermap/Cesium 开发心得----获取三维视角的四至范围
网上目前有两种获取当前Camera的四至范围的方法 方法一 这种方法是最通用的,即使在哥伦布视角(2.5D下依旧能准确获取值) function getCurrentExtent() { // ...
- 照相、从相册上取照片、播放音频、播放本地视频、播放网络视频、MPMoviePlayerController
一.照相.从相册上去照片 1. 先判断是否支持照相功能 *判断当前设备是否支持照相功能,支持返回YES 否则返回NO 注意:模拟器不支持照相功能 把握一个原则只要是物理硬件相关的功能模拟器都不支持 例 ...
- iOS开发- 获取本地视频文件
下面具体介绍下实现过程.先看效果图.图1. 未实现功能前, iTunes截图 图2. 实现功能后, iTunes截图 图3. 实现功能后, 运行截图 好了, 通过图片, 我们可以看到实现的效果.功能包 ...
- iOS 本地视频和网络视频流播放
需求:最近公司需要做一个楼宇对讲的功能:门口机(连接WIFI)拨号对室内机(对应的WIFI)的设备进行呼叫,室内机收到呼叫之后将对收到的数据进行UDP广播的转发,手机(连接对应的WIFI)收到视频流之 ...
- video.js不能控制本地视频或者音频播放时长
问题: 把视频放到本地,然后对视频进行测试,想要控制视频或者音频的播放时长,没办法做到,每次拉动进度条,都会使得本地视频重新播放 原因: 所有浏览器默认js无法访问本地地址,也就是说js不能对本地文件 ...
- github视频录制播放相关功能-参考
lookingstars/JZVideoDemo 视频播放器 Updated on 11 Aug Objective-C 15 10 caoguoqing/VideoEditDemo iOS vi ...
随机推荐
- wordpress 获取指定作者或者文章的所有评论数量
wordpress 获取指定作者或者文章的所有评论数量 <?php $args = array( 'post_author' => '' // fill in post author ID ...
- 【RN - 基础】之Windows下搭建React Native开发环境
前言 React Native由Facebook公司于2015年F8大会上开源,其主张“Learn once, write everywhere”.React Native的核心设计理念是:既拥有Na ...
- 配置Tomcat监听80端口、配置Tomcat虚拟主机、Tomcat日志
6月27日任务 16.4 配置Tomcat监听80端口16.5/16.6/16.7 配置Tomcat虚拟主机16.8 Tomcat日志扩展邱李的tomcat文档 https://www.linuser ...
- Spring Boot中使用Jpa的findOne方法不能传入id
最近通过慕课网学习spring boot,视频中通过jpa的findOne方法以id为参数查询出对应的信息, 而当我自己做测试的时候却发现我的findOne方法的参数没有Integer类型的id,而是 ...
- 微信小程序实现,可滑动、可点击
tab.wxml: 全部 中奖 未中奖 全部 中奖 未中奖 tab.wxss: .swiper-tab { width: 100%; border-bottom: 2rpx solid #ccc; t ...
- 自然语言处理(NLP) - 数学基础(1) - 总述
正如我在<2019年总结>里说提到的, 我将开始一系列自然语言处理(NLP)的笔记. 很多人都说, AI并不难啊, 调现有库和云的API就可以啦. 然而实际上并不是这样的. 首先, AI这 ...
- bug小结
在不同的文件下面可以创建同一个包,但是不能创建同一个class文件!!! ParameterType:需要写实体类的类型,最好不要写实体的别名 这是因为我们在配置mybatis的配置文件时已经说明 ...
- jQuery中的属性选择器
先看代码,后面详细解释: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- [TimLinux] JavaScript BOM浏览器对象模型
1. 简介 ECMAScript是JavaScript的核心,但是如果要在WEB中使用JavaScript,那么BOM则无疑才是真的的核心.BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网 ...
- BZOJ 3065 带插入区间K小值(sag套线段树)
3065: 带插入区间K小值 Time Limit: 60 Sec Memory Limit: 512 MBSubmit: 4696 Solved: 1527[Submit][Status][Di ...