视频转成网页链接php+JS（完整代码）

更新时间：2025-05-19 14:33:59

作者：八木屋

以下是实现视频链接转网页二维码的完整PHP+JS解决方案，包含前后端交互和二维码生成功能，需要安装PHP依赖composer require endroid/qr-code。代码的实现过程参照的产品是视频转链接工具https://www.bamuwu.com/的完整流程。进行了代码重构。
<?php
require_once __DIR__.'/vendor/autoload.php';
use Endroid\QrCode\QrCode;
use Endroid\QrCode\Writer\PngWriter;

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$videoUrl = filter_input(INPUT_POST, 'videoUrl', FILTER_SANITIZE_URL);
if (!$videoUrl || !filter_var($videoUrl, FILTER_VALIDATE_URL)) {
http_response_code(400);
exit(json_encode(['error' => 'Invalid video URL']));
}

$qrCode = new QrCode($videoUrl);
$qrCode->setSize(400);
$qrCode->setMargin(20);

$writer = new PngWriter();
$result = $writer->write($qrCode);

header('Content-Type: application/json');
echo json_encode([
'qrData' => 'data:'.$result->getMimeType().';base64,'.base64_encode($result->getString())
]);
exit;
}
?>

DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>视频链接转二维码</title>
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>
<style>
#qrContainer { margin: 20px; text-align: center }
#videoInput { padding: 8px; width: 300px }
button { padding: 8px 15px; cursor: pointer }
canvas { border: 1px solid #ddd; margin-top: 10px }
</style>
</head>
<body>
<div id="qrContainer">
<h2>视频链接转二维码</h2>
<input type="url" id="videoInput" placeholder="输入视频URL (如: https://example.com/video.mp4)">
<button onclick="generateQR()">生成二维码</button>
<div id="qrCode"></div>
</div>

<script>
function generateQR() {
const videoUrl = document.getElementById('videoInput').value.trim();
if (!videoUrl) return alert('请输入有效的视频URL');

// 前端快速生成预览
const qrDiv = document.getElementById('qrCode');
qrDiv.innerHTML = '';
QRCode.toCanvas(videoUrl, {
width: 200,
color: { dark: '#000', light: '#fff' }
}, (err, canvas) => {
if (err) return console.error(err);
qrDiv.appendChild(canvas);

// 同时请求后端生成高清版
fetch('qr_generator.php', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: `videoUrl=${encodeURIComponent(videoUrl)}`
})
.then(res => res.json())
.then(data => {
if(data.qrData) {
console.log('高清二维码已生成');
// 可在此替换为高清版二维码
// document.getElementById('hdQr').src = data.qrData;
}
})
.catch(console.error);
});
}
</script>
</body>
</html>

更多工具