电商平台视频营销与AI视频优化指南

与Shopify集成示例

以下是如何将AI视频处理与Shopify商店集成的代码示例：

// Shopify应用中集成QAI视频处理功能
// product-video-enhancer.js

/**
 * 初始化视频处理功能
 */
document.addEventListener('DOMContentLoaded', () => {
  // 添加视频处理控制面板
  const productForm = document.querySelector('.product-form');
  if (!productForm) return;
  
  // 创建视频管理面板
  const videoPanel = document.createElement('div');
  videoPanel.classList.add('video-management-panel');
  videoPanel.innerHTML = `
    <div class="panel-header">
      <h3>产品视频管理</h3>
      <button id="upload-video-btn" class="btn">上传视频</button>
    </div>
    <div id="video-preview-container" class="video-container"></div>
    <div class="video-actions">
      <button id="enhance-video-btn" class="btn" disabled>AI增强</button>
      <button id="translate-video-btn" class="btn" disabled>添加多语言</button>
      <button id="trim-video-btn" class="btn" disabled>智能裁剪</button>
    </div>
  `;
  
  productForm.parentNode.insertBefore(videoPanel, productForm);
  
  // 初始化上传功能
  initVideoUpload();
  
  // 初始化视频处理功能
  initVideoProcessing();
});

/**
 * 初始化视频上传功能
 */
function initVideoUpload() {
  const uploadBtn = document.getElementById('upload-video-btn');
  if (!uploadBtn) return;
  
  uploadBtn.addEventListener('click', () => {
    // 创建文件选择器
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = 'video/mp4,video/quicktime,video/webm';
    fileInput.style.display = 'none';
    document.body.appendChild(fileInput);
    
    // 监听文件选择
    fileInput.addEventListener('change', async (e) => {
      if (e.target.files.length === 0) return;
      
      const file = e.target.files[0];
      const formData = new FormData();
      formData.append('video', file);
      formData.append('product_id', getProductId());
      
      // 显示上传进度
      showUploadProgress();
      
      try {
        // 上传视频到QAI服务
        const response = await fetch('/api/videos/upload', {
          method: 'POST',
          body: formData,
        });
        
        const result = await response.json();
        
        if (response.ok) {
          // 显示视频预览
          showVideoPreview(result.video_url, result.video_id);
          // 启用处理按钮
          enableProcessingButtons();
        } else {
          showError('上传失败: ' + (result.error || '未知错误'));
        }
      } catch (error) {
        showError('上传过程中发生错误');
        console.error(error);
      } finally {
        hideUploadProgress();
        document.body.removeChild(fileInput);
      }
    });
    
    // 触发文件选择
    fileInput.click();
  });
}

/**
 * 初始化视频处理功能
 */
function initVideoProcessing() {
  // 增强按钮
  const enhanceBtn = document.getElementById('enhance-video-btn');
  if (enhanceBtn) {
    enhanceBtn.addEventListener('click', async () => {
      const videoId = document.getElementById('video-preview-container').dataset.videoId;
      if (!videoId) return;
      
      try {
        showProcessingStatus('增强中...');
        
        const response = await fetch('/api/videos/enhance', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            video_id: videoId,
            options: {
              resolution: 'hd',
              noise_reduction: true,
              color_correction: true,
              stabilization: true
            }
          }),
        });
        
        const result = await response.json();
        
        if (response.ok) {
          // 更新视频预览
          showVideoPreview(result.enhanced_url, videoId);
          showSuccess('视频增强完成');
        } else {
          showError('增强失败: ' + (result.error || '未知错误'));
        }
      } catch (error) {
        showError('处理过程中发生错误');
        console.error(error);
      } finally {
        hideProcessingStatus();
      }
    });
  }
  
  // 其他处理按钮的事件监听器...
}

// 辅助函数
function getProductId() {
  // 从URL或DOM中获取产品ID
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get('id') || document.querySelector('[name="product_id"]')?.value;
}

function showVideoPreview(url, videoId) {
  const container = document.getElementById('video-preview-container');
  if (!container) return;
  
  container.innerHTML = `
    <video controls src="${url}" class="video-preview"></video>
    <div class="video-info">视频ID: ${videoId}</div>
  `;
  container.dataset.videoId = videoId;
}

function enableProcessingButtons() {
  document.querySelectorAll('.video-actions .btn').forEach(btn => {
    btn.disabled = false;
  });
}

// 状态提示函数...
function showUploadProgress() { /* ... */ }
function hideUploadProgress() { /* ... */ }
function showProcessingStatus(message) { /* ... */ }
function hideProcessingStatus() { /* ... */ }
function showSuccess(message) { /* ... */ }
function showError(message) { /* ... */ }