Image to video generator code

अगर आपको सच में फोटो अपलोड करके वीडियो बनवाना है, तो आपको किसी AI सर्विस (जैसे Replicate, Runway API, या Hugging Face) की API Key लेनी होगी। फिर HTML कोड उस API से कनेक्ट होकर वीडियो बनाएगा।

(ध्यान दें: ऐसी APIs फ्री नहीं होतीं या उनकी सीमाएं होती हैं, और ब्लॉगर पर सीधे API Key डालना सुरक्षित नहीं होता।)

2. क्लाइंट-साइड "Image Slideshow / Motion Video" (100% Blogger पर काम करेगा)

अगर आप ऐसा टूल चाहते हैं जिसमें यूजर:

एक या एक से अधिक इमेज अपलोड करे,

उसमें जूम/पैन (Ken Burns effect) या ट्रांजिशन आए,

और वह सीधे ब्राउज़र से .webm या .mp4 फॉर्मेट में वीडियो डाउनलोड कर सके।

यह Canvas API और JavaScript MediaRecorder की मदद से Blogger पर बिना किसी सर्वर के बिल्कुल मुफ्त काम करता है।

ब्लॉगर के लिए वर्किंग कोड (Image Slideshow to Video Converter)

यह कोड यूजर से इमेज लेगा, उस पर मोशन इफेक्ट डालकर ब्राउज़र में ही वीडियो बनाएगा और डाउनलोड बटन देगा:

<!DOCTYPE html>
<html lang="hi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image to Video Creator</title>
  <style>
    * {
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .vid-tool {
      max-width: 650px;
      margin: 20px auto;
      padding: 25px;
      border: 1px solid #e1e8ed;
      border-radius: 12px;
      text-align: center;
      background: #ffffff;
      box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    }
    .vid-tool h3 {
      color: #1a73e8;
      margin-top: 0;
      margin-bottom: 8px;
    }
    .vid-tool p {
      color: #666;
      font-size: 14px;
      margin-bottom: 20px;
    }
    .control-group {
      margin-bottom: 15px;
      text-align: left;
    }
    .control-group label {
      display: block;
      font-weight: 600;
      margin-bottom: 6px;
      color: #333;
      font-size: 14px;
    }
    .control-group select, .control-group input[type="file"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
      outline: none;
      font-size: 14px;
      background: #fff;
    }
    .btn-group {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin-top: 15px;
      flex-wrap: wrap;
    }
    .btn {
      padding: 11px 20px;
      border: none;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      font-size: 14px;
      transition: 0.2s;
    }
    .btn-create {
      background: #1a73e8;
      color: white;
    }
    .btn-create:hover:not(:disabled) {
      background: #1557b0;
    }
    .btn-create:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
    .btn-reset {
      background: #ea4335;
      color: white;
    }
    .btn-reset:hover {
      background: #c5221f;
    }
    #previewCanvas {
      max-width: 100%;
      max-height: 400px;
      height: auto;
      border-radius: 8px;
      margin-top: 20px;
      border: 1px solid #ddd;
      display: none;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    #downloadLink {
      display: inline-block;
      margin-top: 18px;
      padding: 12px 24px;
      background: #28a745;
      color: white;
      text-decoration: none;
      border-radius: 6px;
      font-weight: bold;
      display: none;
      transition: 0.2s;
    }
    #downloadLink:hover {
      background: #218838;
    }
    #statusText {
      margin-top: 15px;
      font-size: 14px;
      font-weight: 500;
      color: #555;
    }
  </style>
</head>
<body>

<div class="vid-tool">
  <h3>Photo to Video Maker</h3>
  <p>अपनी इमेज से 5 सेकंड का मोशन वीडियो बनाएं</p>
  
  <div class="control-group">
    <label for="imageInput">1. इमेज चुनें (Select Image):</label>
    <input type="file" id="imageInput" accept="image/*">
  </div>

  <div class="control-group">
    <label for="aspectRatio">2. वीडियो अनुपात चुनें (Aspect Ratio):</label>
    <select id="aspectRatio">
      <option value="16:9">16:9 (YouTube Video / Landscape)</option>
      <option value="9:16">9:16 (Instagram Reels / Shorts)</option>
      <option value="1:1">1:1 (Square Post)</option>
      <option value="4:5">4:5 (Instagram Portrait)</option>
    </select>
  </div>

  <div class="btn-group">
    <button id="createBtn" class="btn btn-create" disabled>वीडियो बनाएं (Generate)</button>
    <button id="resetBtn" class="btn btn-reset" onclick="resetTool()">रिफ्रेश करें (Refresh)</button>
  </div>
  
  <p id="statusText"></p>
  
  <canvas id="previewCanvas"></canvas>
  <br>
  <a id="downloadLink">वीडियो डाउनलोड करें (.webm)</a>
</div>

<script>
  const imageInput = document.getElementById('imageInput');
  const aspectRatio = document.getElementById('aspectRatio');
  const createBtn = document.getElementById('createBtn');
  const canvas = document.getElementById('previewCanvas');
  const ctx = canvas.getContext('2d');
  const statusText = document.getElementById('statusText');
  const downloadLink = document.getElementById('downloadLink');

  let loadedImage = null;

  // इमेज सेलेक्ट होने पर
  imageInput.addEventListener('change', (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (event) => {
        loadedImage = new Image();
        loadedImage.onload = () => {
          createBtn.disabled = false;
          statusText.style.color = '#28a745';
          statusText.innerText = "✓ इमेज लोड हो गई! अब 'वीडियो बनाएं' पर क्लिक करें।";
        };
        loadedImage.src = event.target.result;
      };
      reader.readAsDataURL(file);
    }
  });

  // वीडियो जनरेट करना
  createBtn.addEventListener('click', () => {
    if (!loadedImage) return;

    // रेश्यो के अनुसार कैनवास रेजोल्यूशन सेट करना
    const ratio = aspectRatio.value;
    if (ratio === "16:9") {
      canvas.width = 1280;
      canvas.height = 720;
    } else if (ratio === "9:16") {
      canvas.width = 720;
      canvas.height = 1280;
    } else if (ratio === "1:1") {
      canvas.width = 720;
      canvas.height = 720;
    } else if (ratio === "4:5") {
      canvas.width = 720;
      canvas.height = 900;
    }

    canvas.style.display = "block";
    createBtn.disabled = true;
    downloadLink.style.display = "none";
    statusText.style.color = '#1a73e8';
    statusText.innerText = "वीडियो तैयार हो रहा है... कृपया 5 सेकंड प्रतीक्षा करें।";

    const stream = canvas.captureStream(30); // 30 FPS
    let mime = MediaRecorder.isTypeSupported('video/mp4') ? 'video/mp4' : 'video/webm';
    let recorder;

    try {
      recorder = new MediaRecorder(stream, { mimeType: mime });
    } catch(e) {
      recorder = new MediaRecorder(stream);
    }

    const chunks = [];

    recorder.ondataavailable = (e) => chunks.push(e.data);
    recorder.onstop = () => {
      const blob = new Blob(chunks, { type: recorder.mimeType || 'video/webm' });
      const url = URL.createObjectURL(blob);
      downloadLink.href = url;
      downloadLink.download = `video_${ratio.replace(':', '_')}.webm`;
      downloadLink.style.display = "inline-block";
      statusText.style.color = '#28a745';
      statusText.innerText = "✓ वीडियो सफलतापूर्वक तैयार हो गया!";
      createBtn.disabled = false;
    };

    recorder.start();

    // 5 सेकंड का स्मूथ ज़ूम (Ken Burns effect)
    let frame = 0;
    const totalFrames = 150; // 5 सेकंड (30 fps * 5)
    
    // इमेज को स्ट्रेच किए बिना सही स्केल पर फिट करना (Cover Fit)
    const imgRatio = loadedImage.width / loadedImage.height;
    const canvasRatio = canvas.width / canvas.height;
    let renderW, renderH;

    if (imgRatio > canvasRatio) {
      renderH = canvas.height;
      renderW = canvas.height * imgRatio;
    } else {
      renderW = canvas.width;
      renderH = canvas.width / imgRatio;
    }

    function draw() {
      if (frame <= totalFrames) {
        let scale = 1 + (frame / totalFrames) * 0.12; // 12% ज़ूम मोशन
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        ctx.translate(canvas.width / 2, canvas.height / 2);
        ctx.scale(scale, scale);
        ctx.drawImage(loadedImage, -renderW / 2, -renderH / 2, renderW, renderH);
        ctx.restore();
        frame++;
        requestAnimationFrame(draw);
      } else {
        recorder.stop();
      }
    }
    draw();
  });

  // रिफ्रेश / रीसेट फंक्शन
  function resetTool() {
    imageInput.value = "";
    loadedImage = null;
    createBtn.disabled = true;
    canvas.style.display = "none";
    downloadLink.style.display = "none";
    statusText.innerText = "";
    aspectRatio.selectedIndex = 0;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }
</script>

</body>
  </html>

इसे ब्लॉगर में कैसे अपडेट करें:

Blogger के Pages या Posts में जाएँ।
जहाँ यह टूल लगाया था, उसे एडिट करें।
ऊपर बाईं ओर < > HTML View सेलेक्ट करें।
पुराने कोड को हटाकर यह पूरा कोड पेस्ट कर दें और Update/Publish कर दें।

Header Ads Widget

Ticker

Image to video generator code

इसे ब्लॉगर में कैसे अपडेट करें:

Post a Comment

0 Comments

Search This Blog

Blog Archive

Food

Music

Nature

Fashion

Css Options

Default Variables

Link List

Social Media Icons 2

Menu

About Me

Mobile Logo Settings

Pages

Sports

Social Media Icons

Menu Footer Widget

Technology

पेज

पेज

Business

लोकप्रिय पोस्ट

Social Plugin

Social Plugin

Subscribe Us

Ad Space

Popular Posts

Labels

Tags

Technology

Random Posts

Recent in Sports

Popular Posts

Menu Footer Widget