2025-03-11 08:25:45 +00:00
<!-- ********************************************************************
* by jiawanlong
*********************************************************************-->
<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" / >
2025-03-19 03:00:22 +00:00
< link rel = "stylesheet" href = "./../../libs/cesium/Cesium1.98/Widgets/widgets.css" >
< script type = "text/javascript" src = "./../../libs/cesium/Cesium1.98/Cesium.js" > < / script >
2025-03-11 08:25:45 +00:00
< script src = "./video.js" > < / script >
< script src = "./turf.min.js" > < / script >
2025-06-01 11:30:00 +00:00
< script src = "./hls.js" > < / script >
2025-03-11 08:25:45 +00:00
< script src = "./lodash.min.js" > < / script >
< style >
#menu {
position: absolute;
top: 20px;
left: 0;
color: #ffffff;
background: rgba(0, 0, 0, 0.4);
z-index: 9999;
}
#video_dom {
display: none;
position: absolute;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
< / style >
< / head >
< body style = "margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0" >
< div id = "map" style = "margin: 0 auto; width: 100%; height: 100%" > < / div >
< div id = "menu" >
< / div >
< video id = "video_dom" preload = "auto" autoPlay loop >
< / video >
<!-- ./video.mp4 -->
< script type = "text/javascript" >
2025-06-07 11:30:00 +00:00
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMjBhMzcxMC0wNjBiLTRmYjItYjY1MC0wMzAwMzMyMGUyMmEiLCJpZCI6MzAzNzc3LCJpYXQiOjE3NDc2Mzk0NTV9.E_90aKtVdzRGlU2z48VwJ4mWvl-uuDkfQBCOO6zbzn4'
2025-03-11 08:25:45 +00:00
const viewer = new Cesium.Viewer('map', {
contextOptions: {
requestWebgl1: true,
},
});
viewer.scene.debugShowFramesPerSecond = true;
viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.camera.setView({
2025-06-01 11:30:00 +00:00
destination: Cesium.Cartesian3.fromDegrees(112.681287, 33.248737, 1300),
orientation: {
heading: Cesium.Math.toRadians(269.4), // 方向
pitch: Cesium.Math.toRadians(-29.0), // 俯仰角
roll: Cesium.Math.toRadians(0.0) // 翻滚角
}
2025-03-11 08:25:45 +00:00
});
2025-06-01 11:30:00 +00:00
var videoSrc = 'https://sqhls2.ys7.com:7989/v3/openlive/FX4619647_2_1.m3u8?expire=1778830562&id=844961679353290752&t=c843557c001d3a833dfb4f5ab347d319f3847d85b63fb1642bf52e754517a28a&ev=100&u=4bcf089e4d424b9583ac48430a7ef177';
2025-03-11 08:25:45 +00:00
var options = {
horizontalViewAngle: 60,
verticalViewAngle: 40,
video: "video_dom",
2025-06-01 11:30:00 +00:00
viewPosition: Cesium.Cartesian3.fromDegrees(112.66669, 33.248659, 515),
viewPositionEnd: Cesium.Cartesian3.fromDegrees(112.659078,33.249035, 270),
2025-03-11 08:25:45 +00:00
};
v = new video(viewer, options);
v.drawVideo();
// 播放
video_dom.play();
2025-06-01 11:30:00 +00:00
switchSP();
2025-03-11 08:25:45 +00:00
// 暂停
// video_dom.pause();
// 清除
// new video(viewer, {}).clearAll();
// 视角宽高比例
// v.change({
// aspectRatio: 1.7
// })
// // 视角水平张角
// v.change({
// fov: 1.2
// })
// // 视角距离
// v.change({
// far: 200
// })
// 切换视频源
function switchSP() {
var hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video_dom);
2025-06-01 11:30:00 +00:00
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video_dom.play(); // 当解析完毕后开始播放
});
2025-03-11 08:25:45 +00:00
}
< / script >
< / body >
< / html >
