Cara mengubah video mp4 ke html

Question

Elemen HTML <video>_ digunakan untuk merujuk ke sumber file video, sehingga dapat diputar (diputar) di halaman web

Table of Contents Show

Format VideoBeberapa format video didukung oleh elemen HTML <video>
AtributTag Atribut HTML <video>
Atribut GlobalAtribut Secara Global (Keseluruhan)
Atribut AcaraAtribut peristiwa (Acara)
ContohContoh HTML <video> elemen
Contoh Lengkap

Dalam mereferensikan sumber file video, atribut src digunakan yang menunjukkan sumber (sumber) yang mengarah ke tautan file video (disimpan), ditulis baik di elemen <video> itu sendiri atau di elemen <source> yang mewakili sumber video dalam lebih dari satu format, sehingga browser dapat memilih format video yang tepat (didukung)

Di dalam elemen <video>, konten (teks) dapat ditulis, untuk browser lama yang tidak mendukung video HTML5. Teks ini akan muncul menggantikan video yang tidak dapat diputar

HTML <video> adalah tag yang baru diperkenalkan di HTML5

Format VideoBeberapa format video didukung oleh elemen HTML <video>

Deskripsi FormatExtension FileMIME TypesMP4 MPEG 4 file, dengan codec video H264, dan codec audio AAC. mp4video/mp4Ogg TheoraFile Ogg, dengan video codec Theora dan codec audio Vorbis. Oh Tuhan /. ogg /. oggvideo/oggWebMFile WebM dengan codec video VP8 dan codec audio Vorbis. webmvideo/webm

Sedangkan untuk dukungan format video, masing-masing browser berbeda

BrowserMP4OggWebM Chrome Firefox Internet Explorer. Opera Safari

AtributTag Atribut HTML <video>

<video width="400" controls preload="metadata">
  <source src="/media/video/myVideo.mp4" type="video/mp4"/>
  <source src="/media/video/myVideo.webm" type="video/webm"/>
  <source src="/media/video/myVideo.ogv" type="video/ogg"/>
</video>

_3

Menginstruksikan browser untuk mulai memutar video secara otomatis sesegera mungkin tanpa henti

Nilai.

<video width="400" controls preload="metadata">
  <source src="/media/video/myVideo.mp4" type="video/mp4"/>
  <source src="/media/video/myVideo.webm" type="video/webm"/>
  <source src="/media/video/myVideo.ogv" type="video/ogg"/>
</video>

3 atau (kosong)

<video width="400" controls preload="metadata">
  <source src="/media/video/myVideo.mp4" type="video/mp4"/>
  <source src="/media/video/myVideo.webm" type="video/webm"/>
  <source src="/media/video/myVideo.ogv" type="video/ogg"/>
</video>

5

Menginstruksikan browser untuk menampilkan antarmuka (antarmuka pengguna) untuk kontrol video (seperti menampilkan tombol putar, kontrol volume dan sebagainya)

Nilai.

<video width="400" controls preload="metadata">
  <source src="/media/video/myVideo.mp4" type="video/mp4"/>
  <source src="/media/video/myVideo.webm" type="video/webm"/>
  <source src="/media/video/myVideo.ogv" type="video/ogg"/>
</video>

5 atau (kosong)

<video width="400" controls preload="metadata">
  <source src="/media/video/myVideo.mp4" type="video/mp4"/>
  <source src="/media/video/myVideo.webm" type="video/webm"/>
  <source src="/media/video/myVideo.ogv" type="video/ogg"/>
</video>

_7

Tentukan tinggi pemutar video

Nilai. Piksel

<video width="400" controls preload="metadata">
  <source src="/media/video/myVideo.mp4" type="video/mp4"/>
  <source src="/media/video/myVideo.webm" type="video/webm"/>
  <source src="/media/video/myVideo.ogv" type="video/ogg"/>
</video>

_8

Menginstruksikan browser untuk memutar ulang video setelah selesai (mencapai akhir waktu pemutaran)

Nilai.

<video width="400" controls preload="metadata">
  <source src="/media/video/myVideo.mp4" type="video/mp4"/>
  <source src="/media/video/myVideo.webm" type="video/webm"/>
  <source src="/media/video/myVideo.ogv" type="video/ogg"/>
</video>

8 atau (kosong)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML video - by: apacara.com</title>
    <style></style>
  </head>
  <body>
    <video width="320" height="240" controls>
      <source src='/media/video/halwa.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src='/media/video/halwa.ogv' type='video/ogg; codecs="theora, vorbis"'>
      <source src="/media/video/halwa.webm" type='video/webm; codecs="vp8, vorbis"'>

      <track label="English" kind="subtitles" srclang="en"
                                              src="/media/video/subtitles-en.vtt">
      <track label="Indonesian" kind="subtitles" srclang="id"
                                                 src="/media/video/subtitles-id.vtt" default>
      Browser Anda tidak mendukung HTML video tag.
    </video>
  </body>
</html>

0

Memerintahkan browser untuk menonaktifkan (tanpa suara) video

Nilai.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML video - by: apacara.com</title>
    <style></style>
  </head>
  <body>
    <video width="320" height="240" controls>
      <source src='/media/video/halwa.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src='/media/video/halwa.ogv' type='video/ogg; codecs="theora, vorbis"'>
      <source src="/media/video/halwa.webm" type='video/webm; codecs="vp8, vorbis"'>

      <track label="English" kind="subtitles" srclang="en"
                                              src="/media/video/subtitles-en.vtt">
      <track label="Indonesian" kind="subtitles" srclang="id"
                                                 src="/media/video/subtitles-id.vtt" default>
      Browser Anda tidak mendukung HTML video tag.
    </video>
  </body>
</html>

0 atau (kosong)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML video - by: apacara.com</title>
    <style></style>
  </head>
  <body>
    <video width="320" height="240" controls>
      <source src='/media/video/halwa.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src='/media/video/halwa.ogv' type='video/ogg; codecs="theora, vorbis"'>
      <source src="/media/video/halwa.webm" type='video/webm; codecs="vp8, vorbis"'>

      <track label="English" kind="subtitles" srclang="en"
                                              src="/media/video/subtitles-en.vtt">
      <track label="Indonesian" kind="subtitles" srclang="id"
                                                 src="/media/video/subtitles-id.vtt" default>
      Browser Anda tidak mendukung HTML video tag.
    </video>
  </body>
</html>

2

Tentukan URL yang merujuk pada gambar yang akan dijadikan frame poster yang akan muncul sebelum video diputar (klik tombol “play”)

Nilai. URL

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML video - by: apacara.com</title>
    <style></style>
  </head>
  <body>
    <video width="320" height="240" controls>
      <source src='/media/video/halwa.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src='/media/video/halwa.ogv' type='video/ogg; codecs="theora, vorbis"'>
      <source src="/media/video/halwa.webm" type='video/webm; codecs="vp8, vorbis"'>

      <track label="English" kind="subtitles" srclang="en"
                                              src="/media/video/subtitles-en.vtt">
      <track label="Indonesian" kind="subtitles" srclang="id"
                                                 src="/media/video/subtitles-id.vtt" default>
      Browser Anda tidak mendukung HTML video tag.
    </video>
  </body>
</html>

3

Menginstruksikan browser untuk menentukan apakah dan bagaimana penulis memuat video saat halaman web dimuat (termasuk mengunduh video dan metadatanya) untuk pengalaman penelusuran yang baik bagi pengguna

Nilai.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML video - by: apacara.com</title>
    <style></style>
  </head>
  <body>
    <video width="320" height="240" controls>
      <source src='/media/video/halwa.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src='/media/video/halwa.ogv' type='video/ogg; codecs="theora, vorbis"'>
      <source src="/media/video/halwa.webm" type='video/webm; codecs="vp8, vorbis"'>

      <track label="English" kind="subtitles" srclang="en"
                                              src="/media/video/subtitles-en.vtt">
      <track label="Indonesian" kind="subtitles" srclang="id"
                                                 src="/media/video/subtitles-id.vtt" default>
      Browser Anda tidak mendukung HTML video tag.
    </video>
  </body>
</html>

4.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML video - by: apacara.com</title>
    <style></style>
  </head>
  <body>
    <video width="320" height="240" controls>
      <source src='/media/video/halwa.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src='/media/video/halwa.ogv' type='video/ogg; codecs="theora, vorbis"'>
      <source src="/media/video/halwa.webm" type='video/webm; codecs="vp8, vorbis"'>

      <track label="English" kind="subtitles" srclang="en"
                                              src="/media/video/subtitles-en.vtt">
      <track label="Indonesian" kind="subtitles" srclang="id"
                                                 src="/media/video/subtitles-id.vtt" default>
      Browser Anda tidak mendukung HTML video tag.
    </video>
  </body>
</html>

5.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML video - by: apacara.com</title>
    <style></style>
  </head>
  <body>
    <video width="320" height="240" controls>
      <source src='/media/video/halwa.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src='/media/video/halwa.ogv' type='video/ogg; codecs="theora, vorbis"'>
      <source src="/media/video/halwa.webm" type='video/webm; codecs="vp8, vorbis"'>

      <track label="English" kind="subtitles" srclang="en"
                                              src="/media/video/subtitles-en.vtt">
      <track label="Indonesian" kind="subtitles" srclang="id"
                                                 src="/media/video/subtitles-id.vtt" default>
      Browser Anda tidak mendukung HTML video tag.
    </video>
  </body>
</html>

6 atau (kosong)

src

Menentukan URL yang mengarah ke sumber video tempat file tersebut (disimpan)

Nilai. URL

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML video - by: apacara.com</title>
    <style></style>
  </head>
  <body>
    <video width="320" height="240" controls>
      <source src='/media/video/halwa.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src='/media/video/halwa.ogv' type='video/ogg; codecs="theora, vorbis"'>
      <source src="/media/video/halwa.webm" type='video/webm; codecs="vp8, vorbis"'>

      <track label="English" kind="subtitles" srclang="en"
                                              src="/media/video/subtitles-en.vtt">
      <track label="Indonesian" kind="subtitles" srclang="id"
                                                 src="/media/video/subtitles-id.vtt" default>
      Browser Anda tidak mendukung HTML video tag.
    </video>
  </body>
</html>

_8

Tentukan (size) lebar pemutar video (video player)

Nilai. Piksel

Atribut GlobalAtribut Secara Global (Keseluruhan)

Silakan, lihat referensi di HTML Global Attribute

Atribut AcaraAtribut peristiwa (Acara)

Silakan, lihat referensi di Atribut Acara HTML

ContohContoh HTML <video> elemen

Contoh 1

HTML

/* Tidak Ada. Element ini tidak ada default style yang berlaku */

_0 elemen sederhana

HTML

<video src="/media/video/myVideo.mp4" controls>
</video>

Contoh 2

HTML

/* Tidak Ada. Element ini tidak ada default style yang berlaku */

0 element yang merujuk format video lebih dari satu didalam element untuk dukungan browser yang berbeda-beda.

HTML

editor

<video width="400" controls preload="metadata">
  <source src="/media/video/myVideo.mp4" type="video/mp4"/>
  <source src="/media/video/myVideo.webm" type="video/webm"/>
  <source src="/media/video/myVideo.ogv" type="video/ogg"/>
</video>

Di bawah ini, berikut contoh editor untuk mempelajari video HTML dengan trek dan. file vtt yang bisa digunakan untuk menulis caption atau judul video, bisa juga digunakan untuk menulis subtitle yang sering kita lihat pada video karaoke

Untuk lebih jelasnya, silahkan pelajari juga mengenai HTML element.

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (pratinjau) kodenya

SUMBER

editor

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML video - by: apacara.com</title>
    <style></style>
  </head>
  <body>
    <video width="320" height="240" controls>
      <source src='/media/video/halwa.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src='/media/video/halwa.ogv' type='video/ogg; codecs="theora, vorbis"'>
      <source src="/media/video/halwa.webm" type='video/webm; codecs="vp8, vorbis"'>

      <track label="English" kind="subtitles" srclang="en"
                                              src="/media/video/subtitles-en.vtt">
      <track label="Indonesian" kind="subtitles" srclang="id"
                                                 src="/media/video/subtitles-id.vtt" default>
      Browser Anda tidak mendukung HTML video tag.
    </video>
  </body>
</html>

Tolong dicatat. Untuk contoh di atas, jika subtitle tidak terlihat di video, kemungkinan browser Anda tidak mendukung elemen HTML. Gunakan browser terbaru (Google Chrome) untuk mencobanya

kode html