搜索

+

78

-

如何写一个插件对chrome中网页中播放视频或声音进行在线剪辑导出视频或声音？

html5 javascript 音视频

如何写一个插件对chrome中网页中播放视频或声音进行在线剪辑导出视频或声音？

网友回复

+

3

-

分两步：第一步提取视频或音频，第二部才是在线剪辑

我将为你创建一个Chrome插件来提取网页中的视频或音频URL并提供预览功能。

以下是完整的实现方案：

首先，我们需要创建插件的基本结构和文件：

创建 manifest.json 文件（插件配置文件）：

{
  "manifest_version": 3,
  "name": "媒体URL提取和预览器",
  "version": "1.0",
  "description": "提取网页中的视频或音频URL并提供预览功能",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_title": "媒体URL提取和预览"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["preview.html"],
      "matches": ["<all_urls>"]
    }
  ]
}

创建 popup.html 文件（插件弹出界面）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body { 
      width: 400px; 
      padding: 10px; 
      font-family: Arial, sans-serif;
    }
    h3 { 
      margin-top: 0; 
      color: #333;
    }
    .media-list {
      max-height: 300px;
      overflow-y: auto;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 10px;
      margin-bottom: 10px;
    }
    .media-item {
      padding: 8px;
      border-bottom: 1px solid #eee;
      word-break: break-all;
    }
    .media-item:last-child {
      border-bottom: none;
    }
    .media-url {
      font-size: 12px;
      color: #666;
      margin: 5px 0;
    }
    .preview-btn {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
      border-radius: 3px;
      font-size: 12px;
    }
    .preview-btn:hover {
      background-color: #45a049;
    }
    .status {
      padding: 10px;
      text-align: center;
      color: #666;
    }
    button {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      background-color: #2196F3;
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 4px;
    }
    button:hover {
      background-color: #1976D2;
    }
    button:disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <h3>媒体URL提取和预览</h3>
  <button id="scanBtn">扫描页面媒体元素</button>
  <div id="status" class="status">点击按钮扫描页面中的媒体元素</div>
  <div id="mediaList" class="media-list"></div>
  <script src="popup.js"></script>
</body>
</html>

创建 content.js 文件（内容脚本，用于检测页面中的媒体元素）：

// 检测页面中的视频和音频元素
function detectMediaElements() {
  const mediaElements = [];

  // 检测视频元素
  const videos = document.querySelectorAll('video');
  videos.forEach((video, index) => {
    let src = video.src;
    if (!src && video.querySelector('source')) {
      src = video.querySelector('source').src;
    }

    // 获取视频的其他属性
    const poster = video.poster || '';
    const duration = video.dura...

点击查看剩余70%

by 钱端世界

我知道答案，我要回答

我有问题

私活外包

最新提问