YouTube yang lebih cepat membenamkan dengan JavaScript

mempercepat embeds youtube anda dengan javascript: panduan komprehensif

sorotan utama:

secara dramatik mengurangkan masa beban halaman awal dengan menggunakan JavaScript untuk menggantikan embeds YouTube standard dengan pratonton lakaran ringan.
Meningkatkan pengalaman pengguna dan estetika halaman dengan embeds video YouTube yang disesuaikan menggunakan atribut data HTML5 untuk mengawal autoplay, penjenamaan, dan kawalan.
Mengoptimumkan daya tarikan visual tanpa mengorbankan kelajuan beban dengan memanfaatkan pelbagai pilihan kualiti lakaran kecil YouTube untuk resolusi skrin yang berbeza.
Melaksanakan penyelesaian ini dengan cekap menggunakan sama ada JavaScript tulen (untuk pendekatan tanpa lemak, bebas ketergantungan) atau jQuery (untuk pengekodan yang lebih mudah dan keserasian penyemak imbas yang lebih luas).

Kelajuan laman web adalah yang paling utama. Kandungan ringan dengan permintaan minimum adalah penting untuk pengalaman pengguna yang positif. Walau bagaimanapun, video adalah penting untuk melibatkan kandungan, sering diperoleh daripada penyedia pihak ketiga seperti YouTube. Cabarannya? Video dengan ketara meningkatkan masa beban halaman. Video tertanam tunggal boleh menghasilkan banyak permintaan HTTP dan menggunakan jalur lebar yang besar, walaupun penonton tidak aktif menonton.

Artikel ini membentangkan penyelesaian untuk mengurangkan isu ini, yang diilhamkan oleh pendekatan Amit Agarwal 2013, tetapi dipertingkatkan dengan teknik moden. Kami secara drastik akan mengurangkan saiz beban awal video YouTube anda.

Penyelesaian:

Idea teras adalah pada mulanya memaparkan pratonton kecil bukannya pemain video penuh. JavaScript secara dinamik menggantikan lakaran kecil dengan pemain sebenar hanya apabila pengguna mengklik untuk bermain. Ini dengan ketara mengurangkan saiz beban halaman awal. Thumbnail, menjadi imej yang lebih kecil, beban dengan cepat.

Peningkatan:

versi yang lebih baik ini memanfaatkan kedua -dua vanila JavaScript dan pelaksanaan jQuery. Ia juga memperkenalkan ciri baru: Keupayaan untuk menyesuaikan parameter video YouTube melalui atribut data HTML5. Ini menawarkan kawalan halus ke atas tetapan pemain, termasuk:

• : (0 atau 1) Sembunyikan atau tunjukkan kawalan pemain. controls
• : (0 atau 1) Keluarkan logo YouTube. modestbranding
• : (0 atau 1) Lumpuhkan cadangan video yang berkaitan selepas main balik. rel
• : (0 atau 1) Sembunyikan tajuk video dan maklumat pemuat naik. showinfo
• : (saat) Mula main balik pada masa tertentu. start
• : (mis., HD720) Tetapkan kualiti video (jika ada). vq

Apabila video dimainkan, parameter seperti

(untuk memulakan main balik segera) dan autoplay (untuk menyembunyikan kawalan apabila tidak aktif) ditambah secara automatik. autohide

Pilihan Thumbnail YouTube:

YouTube menyediakan beberapa saiz kecil yang boleh diakses melalui URL seperti: https://img.youtube.com/vi/<video-id>/<thumbnail-size>.jpg</thumbnail-size></video-id> (atau menggunakan i.ytimg.com sebagai alternatif yang lebih pendek). Pilihan termasuk:

• default.jpg (120x90)
• hqdefault.jpg (480x360)
• mqdefault.jpg (320x180)
• sddefault.jpg (640x480)
• maxresdefault.jpg (1280x720)

pelaksanaan:

HTML menetapkan ID video YouTube, dimensi, dan (pilihan) parameter tersuai:

<div class="youtube" id="fsrJWUVoXeM" style="width: 500px; height: 281px;"></div>
<div class="youtube" id="lR4tJr7sMPM" data-params="modestbranding=1&showinfo=0&controls=0&vq=hd720" style="width: 640px; height: 360px;"></div>

CSS:

gaya CSS thumbnail, memusatkannya, dan menambah ikon bermain (menggunakan data URI untuk kecekapan):

.youtube { /* ... CSS styles ... */ }
.youtube .play { /* ... CSS styles ... */ }

(pelaksanaan javascript dan jQuery ditinggalkan untuk keringkasan, tetapi boleh didapati dalam artikel asal.)

Hasil dan kesimpulan:

Melaksanakan penyelesaian ini dengan ketara meningkatkan masa beban halaman. Ujian dunia nyata menunjukkan pengurangan yang besar dalam permintaan HTTP dan saiz halaman, yang membawa kepada masa beban yang lebih cepat. Kod ini boleh didapati di Codepen untuk percubaan dan penambahbaikan. Perubahan kod mudah ini menawarkan rangsangan prestasi yang signifikan, menjadikannya tambahan yang berharga untuk mana -mana laman web menggunakan video YouTube tertanam.

Atas ialah kandungan terperinci YouTube yang lebih cepat membenamkan dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!