Membuat Aplikasi Video Structured Data Generator dengan JavaScript

Membuat Aplikasi Video Structured Data Generator dengan JavaScript

—

by

Webbiz.ID
in ,

Berikut adalah contoh kode untuk membuat aplikasi Video Structured Data Generator dengan menggunakan JavaScript dan Bootstrap sebagai user interface. Kode ini akan menghasilkan output berupa code yang bisa langsung disalin oleh pengguna.

Video Structured Data Generator

Video Structured Data Generator


HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Structured Data Generator</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h1>Video Structured Data Generator</h1>
    <form id="videoForm">
      <div class="form-group">
        <label for="videoUrl">URL Video</label>
        <input type="text" class="form-control" id="videoUrl" placeholder="Masukkan URL video">
      </div>
      <div class="form-group">
        <label for="videoTitle">Judul Video</label>
        <input type="text" class="form-control" id="videoTitle" placeholder="Masukkan judul video">
      </div>
      <div class="form-group">
        <label for="videoDescription">Deskripsi Video</label>
        <textarea class="form-control" id="videoDescription" rows="3" placeholder="Masukkan deskripsi video"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Generate</button>
    </form>
    <div id="output" class="mt-4"></div>
  </div>

  <script>
    document.getElementById('videoForm').addEventListener('submit', function(event) {
      event.preventDefault();
      var videoUrl = document.getElementById('videoUrl').value;
      var videoTitle = document.getElementById('videoTitle').value;
      var videoDescription = document.getElementById('videoDescription').value;

      var structuredData = {
        "@context": "https://schema.org",
        "@type": "VideoObject",
        "name": videoTitle,
        "description": videoDescription,
        "contentUrl": videoUrl
      };

      var outputElement = document.getElementById('output');
      outputElement.innerText = JSON.stringify(structuredData, null, 2);
    });
  </script>
</body>
</html>
HTML

Silakan salin kode di atas ke dalam file HTML dan jalankan di browser untuk melihat aplikasi Video Structured Data Generator yang menggunakan Bootstrap sebagai user interface. Pengguna dapat memasukkan URL video, judul video, dan deskripsi video, kemudian menekan tombol “Generate” untuk menghasilkan code output yang sesuai dengan struktur data terstruktur untuk video.

Tutorial lainnya:

Semoga contoh kode di atas bermanfaat untuk Anda dalam membuat aplikasi Video Structured Data Generator menggunakan JavaScript dan Bootstrap.

Artikel Terbaru ⭐