Cara menambah, memainkan dan mengawal video dalam HTML

Dengan perkembangan teknologi Internet, semakin banyak laman web mula menggunakan video untuk memaparkan kandungan. Bagi pembangun tapak web, cara menambahkan video pada halaman web dan menjadikannya dimainkan secara normal adalah soalan biasa. Artikel ini akan memperkenalkan cara menambah, memainkan dan mengawal video dalam HTML.

1. Teg video dalam HTML5

Cara untuk menambah video dalam HTML5 ialah dengan menambah teg video dalam kod HTML. Khususnya, gunakan teg berikut:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

Dalam kod ini, atribut "src" digunakan untuk menentukan URL fail video, seperti "movie.mp4" dan "movie.ogg" dalam kod di atas masing-masing mewakili format MP4 dan OGG video. Jika penyemak imbas menyokong main balik video, salah satu daripadanya akan dipilih untuk dimainkan Jika kedua-dua video tidak disokong, kandungan dalam teg terakhir akan dipaparkan "Pelayar anda tidak menyokong teg video."

Antaranya, "lebar" dan "tinggi" boleh digunakan untuk menentukan lebar dan tinggi video. Atribut kawalan digunakan untuk menambah bar kawalan untuk pemain video.

2. Kawal main balik video

Selepas menambah video, kami boleh mengawal video melalui kod berikut:

var video = document.getElementsByTagName("video")[0];
video.play(); //播放
video.pause(); //暂停
video.currentTime = 0; //设置当前时间为 0 秒
video.volume = 0.5; //设置音量为一半

Antaranya, "play()" dan Fungsi "jeda" ()" digunakan untuk memainkan dan menjeda video masing-masing, atribut currentTime digunakan untuk menetapkan masa semasa main balik video dan atribut kelantangan digunakan untuk menetapkan kelantangan video.

3. Sokong fail video dalam pelbagai format

Untuk membolehkan lebih banyak penyemak imbas menyokong main balik video, fail video dalam berbilang format boleh digunakan dan berbilang sumber boleh disediakan pada masa yang sama.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

Tiga format berbeza disediakan di sini untuk penyemak imbas dan sistem pengendalian yang berbeza untuk memastikan keluasan liputan video.

4. Pilihan pramuat video

Teg video dalam HTML5 juga menyediakan atribut pramuat anda boleh memilih untuk memuat turun video terlebih dahulu apabila halaman dimuatkan untuk mengelakkan ketinggalan video.

Menyokong tiga nilai ​​untuk atribut pramuat:

• pramuat = "tiada": Jangan muat turun terlebih dahulu.
• pramuat = "metadata": Muat turun metadata video, seperti tempoh video, trek audio dan maklumat lain.
• pramuat = "auto": Muat turun keseluruhan fail video.

Apabila atribut pramuat diberikan nilai "auto", video akan dimuat turun semasa proses pemuatan halaman Pada masa ini, status pemuatan video boleh diperoleh melalui JavaScript.

var video = document.getElementsByTagName("video")[0];
video.load(); //下载整个视频文件
console.log(video.buffered.end(0)); //输出已下载部分

5. Menggunakan video YouTube dalam halaman web

Selain membenamkan terus fail video melalui teg video, anda juga boleh membenamkan video YouTube untuk main balik video. Pelaksanaan khusus adalah seperti berikut:

• Mula-mula anda perlu mencari video yang ingin anda benamkan di YouTube.
• Tambahkan kod HTML berikut pada halaman:

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

ps: "VIDEO_ID" di sini ialah pengecam unik untuk video.

• Kemudian laraskan gaya CSS mengikut cara standard.

6 Keserasian penyemak imbas

Kaedah menambah video dalam HTML5 telah disokong secara meluas dalam penyemak imbas moden, tetapi terdapat juga beberapa penyemak imbas yang lebih lama Terdapat masalah dengan tidak menyokong video HTML5 . Pelayar ini boleh menyokong main balik video melalui JavaScript dan Flash.

• Melalui JavaScript: Anda boleh menggunakan perpustakaan seperti video.js atau JWPlayer.
• Melalui Flash: Benamkan pemain Flash dalam halaman melalui swfobject dan swfmedia, dan kemudian muatkan video.

Ringkasan

Artikel ini memperkenalkan cara menambah, memainkan dan mengawal video dalam HTML dan memperkenalkan beberapa ciri main balik yang biasa digunakan. Semasa proses pembangunan sebenar, pembangun harus memberi perhatian kepada isu keserasian dan menyediakan fail video dalam pelbagai format yang berbeza untuk memastikan setiap penyemak imbas dapat menyokong main balik video dengan sempurna.

Atas ialah kandungan terperinci Cara menambah, memainkan dan mengawal video dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!