|
|
@@ -148,10 +148,6 @@
|
|
|
margin-right: 2px;
|
|
|
margin-bottom: 3px;
|
|
|
}
|
|
|
-
|
|
|
- .imgBtnDgp {
|
|
|
- display: none;
|
|
|
- }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -206,7 +202,7 @@
|
|
|
<script src="https://unpkg.com/video.js@7.10.2/dist/video.min.js"></script>
|
|
|
<script type="module">
|
|
|
import Player from './videoPlayer/videoPlay-js.js'
|
|
|
-
|
|
|
+ const host = "http://218.28.198.186:10508"
|
|
|
// 检测HLS支持
|
|
|
function checkHLSSupport() {
|
|
|
const video = document.createElement('video');
|
|
|
@@ -225,14 +221,72 @@
|
|
|
const script = document.createElement('script');
|
|
|
script.src = 'https://cdn.jsdelivr.net/npm/hls.js@latest';
|
|
|
script.onload = () => {
|
|
|
- console.log('HLS.js加载完成');
|
|
|
+ console.log('HLS.js加载完成，版本:', window.Hls.version);
|
|
|
resolve();
|
|
|
};
|
|
|
- script.onerror = reject;
|
|
|
+ script.onerror = () => {
|
|
|
+ console.error('HLS.js加载失败');
|
|
|
+ reject(new Error('HLS.js加载失败'));
|
|
|
+ };
|
|
|
document.head.appendChild(script);
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+ // 尝试使用HLS.js播放
|
|
|
+ function tryHLSJSPlayer(videoSrc) {
|
|
|
+ if (!window.Hls) {
|
|
|
+ console.error('HLS.js未加载');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!Hls.isSupported()) {
|
|
|
+ console.error('浏览器不支持HLS.js');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ const video = document.getElementById('myPlayer');
|
|
|
+ if (!video) {
|
|
|
+ console.error('视频元素不存在');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ const hls = new Hls({
|
|
|
+ debug: true,
|
|
|
+ enableWorker: true,
|
|
|
+ lowLatencyMode: true
|
|
|
+ });
|
|
|
+
|
|
|
+ hls.loadSource(videoSrc);
|
|
|
+ hls.attachMedia(video);
|
|
|
+
|
|
|
+ hls.on(Hls.Events.MANIFEST_PARSED, function() {
|
|
|
+ console.log('HLS.js: 清单解析完成');
|
|
|
+ video.play().catch(e => {
|
|
|
+ console.error('HLS.js播放失败:', e);
|
|
|
+ showError('HLS.js播放失败: ' + e.message);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ hls.on(Hls.Events.ERROR, function(event, data) {
|
|
|
+ console.error('HLS.js错误:', event, data);
|
|
|
+ if (data.fatal) {
|
|
|
+ switch(data.type) {
|
|
|
+ case Hls.ErrorTypes.NETWORK_ERROR:
|
|
|
+ showError('网络错误，无法加载视频流');
|
|
|
+ break;
|
|
|
+ case Hls.ErrorTypes.MEDIA_ERROR:
|
|
|
+ showError('媒体错误，视频格式可能不支持');
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ showError('HLS播放器致命错误');
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
let player = null
|
|
|
let stopTimer = 0
|
|
|
|
|
|
@@ -326,7 +380,7 @@
|
|
|
|
|
|
return $.ajax({
|
|
|
type: "POST",
|
|
|
- url: "http://47.110.79.22:9000/api/api_gateway?method=device.device_manage.get_device_info",
|
|
|
+ url: `${host}/api/api_gateway?method=device.device_manage.get_device_info`,
|
|
|
data: {
|
|
|
device_id: device_id,
|
|
|
token: token
|
|
|
@@ -382,9 +436,9 @@
|
|
|
} else {
|
|
|
|
|
|
$('#dialog').html('拍照指令正在下发，请等待...').stop().show(50)
|
|
|
- let url = "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.camera_takephoto"
|
|
|
+ let url =`${host}/api/api_gateway?method=camera.camera_manage.camera_takephoto`
|
|
|
if (videoType == 'dgp') {
|
|
|
- url = "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.multi_camera_takephoto"
|
|
|
+ url = `${host}/api/api_gateway?method=camera.camera_manage.multi_camera_takephoto`
|
|
|
}
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
@@ -404,13 +458,13 @@
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
- let url = "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.ctrl_camera"
|
|
|
+ let url = `${host}/api/api_gateway?method=camera.camera_manage.ctrl_camera`
|
|
|
let postData = {
|
|
|
device_id: device_id,
|
|
|
token
|
|
|
}
|
|
|
if (videoType == 'dgp') {
|
|
|
- url = "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.multi_ctrl_camera"
|
|
|
+ url = `${host}/api/api_gateway?method=camera.camera_manage.multi_ctrl_camera`
|
|
|
postData.ctrl = movenum
|
|
|
} else {
|
|
|
postData.ctrl = ctrl
|
|
|
@@ -434,7 +488,7 @@
|
|
|
stopTimer = setTimeout(()=>{
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
- url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.mulit_stop_move",
|
|
|
+ url: `${host}/api/api_gateway?method=camera.camera_manage.mulit_stop_move`,
|
|
|
data: {
|
|
|
device_id: device_id,
|
|
|
token
|
|
|
@@ -445,7 +499,7 @@
|
|
|
} else {
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
- url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.ctrl_camera",
|
|
|
+ url: `${host}/api/api_gateway?method=camera.camera_manage.ctrl_camera`,
|
|
|
data: {
|
|
|
device_id: device_id,
|
|
|
ctrl: "stop",
|
|
|
@@ -462,7 +516,7 @@
|
|
|
form.append('token', token)
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
- url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.save_camera_photo",
|
|
|
+ url: `${host}/api/api_gateway?method=camera.camera_manage.save_camera_photo`,
|
|
|
contentType: false,
|
|
|
processData: false,
|
|
|
data: form
|
|
|
@@ -528,7 +582,7 @@
|
|
|
if (videoType == 'dgp') {
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
- url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.multi_addr_camera",
|
|
|
+ url: `${host}/api/api_gateway?method=camera.camera_manage.multi_addr_camera`,
|
|
|
data: {
|
|
|
device_id: device_id,
|
|
|
token
|
|
|
@@ -569,82 +623,146 @@
|
|
|
|
|
|
const hlsHdSrc = videoSource.source;
|
|
|
|
|
|
- var playHtml =
|
|
|
- `<video id="myPlayer" poster='' controls playsInline webkit-playsinline style="width:100%; height:100%;"></video>`;
|
|
|
- $("#box").html(playHtml)
|
|
|
-
|
|
|
- var myVideo = videojs(`myPlayer`, {
|
|
|
- controls: true,
|
|
|
- autoplay: false,
|
|
|
- preload: 'metadata',
|
|
|
- sources: [{
|
|
|
- type: videoSource.type === 'rtmp' ? 'rtmp/flv' : 'application/x-mpegURL',
|
|
|
- src: hlsHdSrc,
|
|
|
- }],
|
|
|
- html5: {
|
|
|
- hls: {
|
|
|
- enableLowInitialPlaylist: true,
|
|
|
- smoothQualityChange: true,
|
|
|
- overrideNative: true
|
|
|
- }
|
|
|
- }
|
|
|
- }, function onPlayerReady() {
|
|
|
- console.log('DGP播放器准备完成');
|
|
|
- // 延迟播放，确保源加载完成
|
|
|
- setTimeout(() => {
|
|
|
- myVideo.play().catch(e => {
|
|
|
- console.error('DGP播放失败:', e);
|
|
|
- showError('DGP视频播放失败: ' + e.message);
|
|
|
- });
|
|
|
- }, 500);
|
|
|
- });
|
|
|
-
|
|
|
- // 添加错误处理
|
|
|
- myVideo.on('error', function(e) {
|
|
|
- console.error('DGP Video.js错误:', e, myVideo.error());
|
|
|
- const error = myVideo.error();
|
|
|
- let errorMsg = 'DGP视频播放出错';
|
|
|
+ // 根据视频源类型选择合适的播放器
|
|
|
+ if (videoSource.type === 'rtmp') {
|
|
|
+ // RTMP流使用Flash播放器或转换为HLS
|
|
|
+ console.log('检测到RTMP流，尝试使用备用播放方案');
|
|
|
|
|
|
- if (error) {
|
|
|
- switch(error.code) {
|
|
|
- case 1:
|
|
|
- errorMsg = 'DGP视频加载被中止';
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- errorMsg = 'DGP网络错误导致视频下载失败';
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- errorMsg = 'DGP视频解码失败';
|
|
|
- break;
|
|
|
- case 4:
|
|
|
- errorMsg = 'DGP视频格式不支持或视频源无效';
|
|
|
- break;
|
|
|
- default:
|
|
|
- errorMsg = 'DGP未知播放错误';
|
|
|
- }
|
|
|
+ // 尝试查找HLS备用源
|
|
|
+ const hlsBackup = getAvailableVideoSource(data, 'hls');
|
|
|
+ if (hlsBackup.source) {
|
|
|
+ console.log('使用HLS备用源:', hlsBackup.source);
|
|
|
+ createVideoJSPlayer(hlsBackup.source, 'application/x-mpegURL');
|
|
|
+ } else {
|
|
|
+ // 如果没有HLS源，显示RTMP不支持的提示
|
|
|
+ showError('当前设备使用RTMP流，浏览器不支持直接播放。请联系管理员配置HLS流。');
|
|
|
}
|
|
|
-
|
|
|
- showError(errorMsg);
|
|
|
- });
|
|
|
-
|
|
|
- myVideo.on('play', function() {
|
|
|
- console.log('DGP开始播放')
|
|
|
- });
|
|
|
-
|
|
|
- myVideo.on('loadstart', function() {
|
|
|
- console.log('DGP开始加载视频');
|
|
|
- });
|
|
|
-
|
|
|
- myVideo.on('canplay', function() {
|
|
|
- console.log('DGP视频可以播放');
|
|
|
+ } else {
|
|
|
+ // HLS/其他格式使用Video.js
|
|
|
+ const mimeType = videoSource.type === 'hls' || videoSource.type === 'hlsHd'
|
|
|
+ ? 'application/x-mpegURL'
|
|
|
+ : 'video/mp4';
|
|
|
+ createVideoJSPlayer(hlsHdSrc, mimeType);
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ console.error('DGP视频请求失败:', error);
|
|
|
+ showError('DGP网络请求失败: ' + (error.message || '请检查网络连接'));
|
|
|
+ });
|
|
|
+
|
|
|
+ // 创建Video.js播放器的通用函数
|
|
|
+ function createVideoJSPlayer(videoSrc, mimeType) {
|
|
|
+ console.log('创建播放器，源:', videoSrc, '类型:', mimeType);
|
|
|
+
|
|
|
+ var playHtml =
|
|
|
+ `<video id="myPlayer" poster='' controls playsInline webkit-playsinline style="width:100%; height:100%;"></video>`;
|
|
|
+ $("#box").html(playHtml)
|
|
|
+
|
|
|
+ // 如果是HLS格式且HLS.js可用，优先使用HLS.js
|
|
|
+ if (mimeType === 'application/x-mpegURL' && window.Hls && Hls.isSupported()) {
|
|
|
+ console.log('使用HLS.js播放器');
|
|
|
+ if (tryHLSJSPlayer(videoSrc)) {
|
|
|
+ return; // HLS.js成功初始化
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 使用Video.js作为fallback
|
|
|
+ console.log('使用Video.js播放器');
|
|
|
+ var myVideo = videojs(`myPlayer`, {
|
|
|
+ controls: true,
|
|
|
+ autoplay: false,
|
|
|
+ preload: 'metadata',
|
|
|
+ sources: [{
|
|
|
+ type: mimeType,
|
|
|
+ src: videoSrc,
|
|
|
+ }],
|
|
|
+ html5: {
|
|
|
+ hls: {
|
|
|
+ enableLowInitialPlaylist: true,
|
|
|
+ smoothQualityChange: true,
|
|
|
+ overrideNative: false // 让HLS.js处理
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, function onPlayerReady() {
|
|
|
+ console.log('Video.js播放器准备完成');
|
|
|
+ // 延迟播放，确保源加载完成
|
|
|
+ setTimeout(() => {
|
|
|
+ myVideo.play().catch(e => {
|
|
|
+ console.error('Video.js播放失败:', e);
|
|
|
+ showError('视频播放失败: ' + e.message);
|
|
|
});
|
|
|
- })
|
|
|
+ }, 1000);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 添加错误处理
|
|
|
+ myVideo.on('error', function(e) {
|
|
|
+ console.error('Video.js错误:', e, myVideo.error());
|
|
|
+ const error = myVideo.error();
|
|
|
+ let errorMsg = '视频播放出错';
|
|
|
+
|
|
|
+ if (error) {
|
|
|
+ switch(error.code) {
|
|
|
+ case 1:
|
|
|
+ errorMsg = '视频加载被中止';
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ errorMsg = '网络错误导致视频下载失败，请检查网络连接';
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ errorMsg = '视频解码失败，可能是格式不支持';
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ errorMsg = '视频格式不支持。源: ' + videoSrc + ' 类型: ' + mimeType;
|
|
|
+ // 如果Video.js失败，尝试原生播放器
|
|
|
+ console.log('Video.js失败，尝试原生播放器');
|
|
|
+ tryNativePlayer(videoSrc);
|
|
|
+ return;
|
|
|
+ default:
|
|
|
+ errorMsg = '未知播放错误 (错误码: ' + error.code + ')';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ showError(errorMsg);
|
|
|
+ });
|
|
|
+
|
|
|
+ myVideo.on('play', function() {
|
|
|
+ console.log('Video.js开始播放')
|
|
|
+ });
|
|
|
+
|
|
|
+ myVideo.on('loadstart', function() {
|
|
|
+ console.log('Video.js开始加载视频');
|
|
|
+ });
|
|
|
+
|
|
|
+ myVideo.on('canplay', function() {
|
|
|
+ console.log('Video.js视频可以播放');
|
|
|
+ });
|
|
|
+
|
|
|
+ myVideo.on('loadedmetadata', function() {
|
|
|
+ console.log('Video.js视频元数据加载完成');
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 尝试原生播放器
|
|
|
+ function tryNativePlayer(videoSrc) {
|
|
|
+ console.log('尝试原生播放器');
|
|
|
+ var playHtml = `<video id="nativePlayer" controls playsInline webkit-playsinline style="width:100%; height:100%;" src="${videoSrc}"></video>`;
|
|
|
+ $("#box").html(playHtml);
|
|
|
+
|
|
|
+ const video = document.getElementById('nativePlayer');
|
|
|
+ video.addEventListener('error', function(e) {
|
|
|
+ console.error('原生播放器也失败了:', e);
|
|
|
+ showError('所有播放器都无法播放此视频源，请联系管理员检查视频流配置');
|
|
|
+ });
|
|
|
+
|
|
|
+ video.addEventListener('canplay', function() {
|
|
|
+ console.log('原生播放器可以播放');
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
} else {
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
// url: "http://47.110.79.22:9000/api/api_gateway?method=camera.camera_manage.multi_addr_camera",
|
|
|
- url: "http://192.168.1.107:8000/api/api_gateway?method=camera.camera_manage.multi_addr_camera",
|
|
|
+ url: `${host}/api/api_gateway?method=camera.camera_manage.multi_addr_camera`,
|
|
|
data: {
|
|
|
device_id: device_id,
|
|
|
token
|
|
|
@@ -685,102 +803,22 @@
|
|
|
initYunlianPlayer(data.rtsp)
|
|
|
|
|
|
} else {
|
|
|
- let hlsHdSrc = data.type_id == 0 ? data.hls : data.hlsHd;
|
|
|
-
|
|
|
- console.log('选择的视频源字段:', data.type_id == 0 ? 'hls' : 'hlsHd');
|
|
|
- console.log('视频源值:', hlsHdSrc);
|
|
|
-
|
|
|
- // 如果主要源无效，尝试备用源
|
|
|
- if (!hlsHdSrc || hlsHdSrc === 'undefined' || hlsHdSrc === '') {
|
|
|
- console.warn('主要视频源无效，尝试备用源');
|
|
|
- hlsHdSrc = data.hls || data.hlsHd || data.rtmp || data.rtsp;
|
|
|
- console.log('备用视频源:', hlsHdSrc);
|
|
|
- }
|
|
|
+ // 获取可用的视频源
|
|
|
+ const videoSource = getAvailableVideoSource(data, data.type_id == 0 ? 'hls' : 'hlsHd');
|
|
|
|
|
|
- // 验证视频源
|
|
|
- if (!hlsHdSrc || hlsHdSrc === 'undefined' || hlsHdSrc === '') {
|
|
|
- console.error('所有视频源都无效:', {
|
|
|
- hls: data.hls,
|
|
|
- hlsHd: data.hlsHd,
|
|
|
- rtmp: data.rtmp,
|
|
|
- rtsp: data.rtsp
|
|
|
- });
|
|
|
- showError('视频源获取失败，请检查设备是否在线或联系管理员');
|
|
|
+ if (!videoSource.source) {
|
|
|
+ console.error('没有找到可用的视频源');
|
|
|
+ showError('设备可能离线或未配置视频流，请检查设备状态');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
- console.log('视频源:', hlsHdSrc);
|
|
|
-
|
|
|
- var playHtml =
|
|
|
- `<video id="myPlayer" poster='' controls playsInline webkit-playsinline style="width:100%; height:100%;"></video>`;
|
|
|
- $("#box").html(playHtml)
|
|
|
-
|
|
|
- var myVideo = videojs(`myPlayer`, {
|
|
|
- controls: true,
|
|
|
- autoplay: false,
|
|
|
- preload: 'metadata',
|
|
|
- sources: [{
|
|
|
- type: 'application/x-mpegURL',
|
|
|
- src: hlsHdSrc,
|
|
|
- }],
|
|
|
- html5: {
|
|
|
- hls: {
|
|
|
- enableLowInitialPlaylist: true,
|
|
|
- smoothQualityChange: true,
|
|
|
- overrideNative: true
|
|
|
- }
|
|
|
- }
|
|
|
- }, function onPlayerReady() {
|
|
|
- console.log('播放器准备完成');
|
|
|
- setTimeout(() => {
|
|
|
- myVideo.play().catch(e => {
|
|
|
- console.error('播放失败:', e);
|
|
|
- $('#dialog').html('视频播放失败: ' + e.message).stop().show(500).delay(3000).hide(500);
|
|
|
- $('.videoBtnPlay').show();
|
|
|
- });
|
|
|
- }, 500);
|
|
|
- });
|
|
|
-
|
|
|
- // 添加错误处理
|
|
|
- myVideo.on('error', function(e) {
|
|
|
- console.error('Video.js错误:', e, myVideo.error());
|
|
|
- const error = myVideo.error();
|
|
|
- let errorMsg = '视频播放出错';
|
|
|
-
|
|
|
- if (error) {
|
|
|
- switch(error.code) {
|
|
|
- case 1:
|
|
|
- errorMsg = '视频加载被中止';
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- errorMsg = '网络错误导致视频下载失败';
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- errorMsg = '视频解码失败';
|
|
|
- break;
|
|
|
- case 4:
|
|
|
- errorMsg = '视频格式不支持或视频源无效';
|
|
|
- break;
|
|
|
- default:
|
|
|
- errorMsg = '未知播放错误';
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- $('#dialog').html(errorMsg).stop().show(500).delay(3000).hide(500);
|
|
|
- $('.videoBtnPlay').show();
|
|
|
- });
|
|
|
-
|
|
|
- myVideo.on('play', function() {
|
|
|
- console.log('开始播放')
|
|
|
- });
|
|
|
-
|
|
|
- myVideo.on('loadstart', function() {
|
|
|
- console.log('开始加载视频');
|
|
|
- });
|
|
|
+ console.log(`使用${videoSource.type}视频源:`, videoSource.source);
|
|
|
|
|
|
- myVideo.on('canplay', function() {
|
|
|
- console.log('视频可以播放');
|
|
|
- });
|
|
|
+ // 使用通用播放器创建函数
|
|
|
+ const mimeType = videoSource.type === 'hls' || videoSource.type === 'hlsHd'
|
|
|
+ ? 'application/x-mpegURL'
|
|
|
+ : 'video/mp4';
|
|
|
+ createVideoJSPlayer(videoSource.source, mimeType);
|
|
|
}
|
|
|
|
|
|
} else {
|
