分两步:第一步提取视频或音频,第二部才是在线剪辑
我将为你创建一个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.duration || 0;
if (src) {
mediaElements.push({
type: 'video',
src: src,
poster: poster,
duration: duration,
index: index
});
}
});
// 检测音频元素
const audios = document.querySelectorAll('audio');
audios.forEach((audio, index) => {
let src = audio.src;
if (!src && audio.querySelector('source')) {
src = audio.querySelector('source').src;
}
if (src) {
mediaElements.push({
type: 'audio',
src: src,
index: index
});
}
});
// 检测嵌入的媒体资源(通过网络请求)
const mediaUrls = detectMediaInNetworkRequests();
return {
elements: mediaElements,
networkMedia: mediaUrls
};
}
// 模拟检测网络请求中的媒体资源(实际应用中需要配合background script)
function detectMediaInNetworkRequests() {
// 这里只是一个示例,实际插件可能需要使用chrome.webRequest API来监听网络请求
return [];
}
// 监听来自popup的消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.action === "getMediaElements") {
const mediaData = detectMediaElements();
sendResponse(mediaData);
}
});
// 将函数暴露给全局作用域,以便popup可以调用
window.detectMediaElements = detectMediaElements; 创建 popup.js 文件(处理弹出界面的交互):
document.addEventListener('DOMContentLoaded', function() {
const scanBtn = document.getElementById('scanBtn');
const statusDiv = document.getElementById('status');
const mediaListDiv = document.getElementById('mediaList');
// 扫描页面媒体元素
scanBtn.addEventListener('click', function() {
statusDiv.innerHTML = "正在扫描页面中的媒体元素...";
scanBtn.disabled = true;
// 获取当前标签页的媒体元素
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.scripting.executeScript({
target: {tabId: tabs[0].id},
files: ['content.js']
}, function() {
chrome.tabs.sendMessage(tabs[0].id, {action: "getMediaElements"}, function(response) {
scanBtn.disabled = false;
if (response) {
displayMediaElements(response.elements);
} else {
statusDiv.innerHTML = "未检测到媒体元素";
}
});
});
});
});
// 显示媒体元素列表
function displayMediaElements(mediaElements) {
if (mediaElements.length === 0) {
statusDiv.innerHTML = "未检测到媒体元素";
mediaListDiv.innerHTML = "";
return;
}
statusDiv.innerHTML = `检测到 ${mediaElements.length} 个媒体元素`;
let mediaListHTML = "";
mediaElements.forEach((media, index) => {
mediaListHTML += `
<div class="media-item">
<strong>${media.type.toUpperCase()} ${index + 1}</strong>
<div class="media-url">${media.src}</div>
<button class="preview-btn" data-src="${media.src}" data-type="${media.type}">预览</button>
</div>
`;
});
mediaListDiv.innerHTML = mediaListHTML;
// 为预览按钮添加事件监听器
document.querySelectorAll('.preview-btn').forEach(button => {
button.addEventListener('click', function() {
const src = this.getAttribute('data-src');
const type = this.getAttribute('data-type');
openPreview(src, type);
});
});
}
// 打开预览窗口
function openPreview(src, type) {
// 创建预览窗口
const previewWindow = window.open('', '_blank', 'width=600,height=400');
previewWindow.document.write(`
<!DOCTYPE html>
<html>
<head>
<title>媒体预览</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
background: #f5f5f5;
}
.container {
max-width: 100%;
margin: 0 auto;
}
h3 {
color: #333;
text-align: center;
}
.media-container {
text-align: center;
margin: 20px 0;
}
video, audio {
max-width: 100%;
height: auto;
}
.url-display {
background: #fff;
padding: 10px;
border-radius: 4px;
border: 1px solid #ddd;
word-break: break-all;
margin: 10px 0;
font-size: 12px;
}
</style>
</head>
<body>
<div class="container">
<h3>媒体预览</h3>
<div class="url-display">${src}</div>
<div class="media-container">
${type === 'video' ?
`<video controls autoplay>
<source src="${src}" type="video/mp4">
您的浏览器不支持视频标签。
</video>` :
`<audio controls autoplay>
<source src="${src}" type="audio/mpeg">
您的浏览器不支持音频标签。
</audio>`
}
</div>
</div>
</body>
</html>
`);
previewWindow.document.close();
}
}); 这个Chrome插件具有以下功能:
扫描当前页面中的所有视频和音频元素
提取这些媒体元素的URL
在弹出窗口中显示媒体元素列表
提供预览功能,点击预览按钮会在新窗口中播放媒体
要使用这个插件,请按照以下步骤操作:
创建一个新的文件夹来存放插件文件
将上述四个文件保存到该文件夹中
在Chrome浏览器中打开 chrome://extensions/
开启右上角的"开发者模式"
点击"加载已解压的扩展程序"
选择你创建的插件文件夹
插件的工作原理如下:
manifest.json 定义了插件的基本信息、权限和入口点
content.js 在页面中运行,负责检测页面上的媒体元素
popup.html 和 popup.js 提供用户界面,允许用户扫描页面并预览媒体
当用户点击"扫描页面媒体元素"按钮时,插件会执行content script来检测媒体元素
检测到的媒体元素会显示在弹出窗口中
用户可以点击"预览"按钮在新窗口中播放媒体
需要注意的是,由于浏览器的安全限制,某些网站可能会阻止插件访问其媒体资源。此外,一些网站可能使用动态加载或加密技术来保护其媒体内容,这可能会使提取变得更加困难。
第二部:在线剪辑,既然获取了网页中的音视频url,那么结合webcoder这个强大的api就能实现在线音视频剪辑了
剪辑参考这个代码
网友回复


