Surat Kabar Harry Potter

Kami membuat video pada halaman seperti di koran Harry Potter yang legendaris.
Untuk membuat perendaman maksimum!


Untuk membuat ini, kita memerlukan satu video pendek (pratinjau), yang akan dilingkarkan dan tanpa suara. Video kedua adalah video biasa dengan suara yang akan menyala ketika Anda mengarahkan kursor, klik atau gulir.

Kode html tertanam di halaman:

<div class="smartVideo graysv"> <video data-cprotate data-cprotatehover muted loop data-inits="autoplay" data-src="./test1.mp4" data-poster="./test.jpg" webkit-playsinline playsinline pip="false"></video> <video data-cprotate data-volume="1" data-src="./test2.mp4" data-poster="./test.jpg" webkit-playsinline playsinline pip="false"></video> </div> 

2 video yang dibungkus dengan div ditandai dengan kelas smartVideo dan kelas graysv ditambahkan jika Anda memerlukan filter hitam putih pada video sampai dihidupkan atau tanpa suara!

data-cprotate - memberi tahu skrip bahwa akan ada rotasi video utama dan pratinjau.
data-src - path ke file video.
data-poster - jalur ke gambar yang ditampilkan saat video sedang dimuat.
playsinline - untuk autorun di bawah smartphone, itu tidak akan mulai tanpanya.
pip = "false" - sehingga browser tidak menampilkan tombol unduh.

Untuk klip pertama, kita harus mengatur atribut loop data yang tidak di-inits = autoplay , yang berarti: tanpa suara, loop, dan autostart jika terlihat di layar.

Untuk klip video pertama, ada atribut data-cprotatehover , yang bersifat opsional dan artinya memulai video saat Anda mengarahkan mouse ke sana. Anda tidak perlu meletakkannya di video kedua!

Video kedua perlu menentukan data-volume = 1 volume, tetapi jika Anda tidak ingin suara, maka Anda perlu mengatur 0 .

Contoh cara membuat ulasan di halaman.

Untuk terhubung, Anda perlu memasukkan gaya CSS di halaman:

 <style> .smartVideo{ width:300px; } .smartVideo video { width:100%; z-index:0; position: absolute; top:0; left:0; user-select:none; border:0; padding:0; margin:0; vertical-align:middle; cursor:pointer; outline:none; } .smartVideo > video:first-child { position:relative; z-index:1; } .smartVideo video:not([data-inits="autoplay"]){visibility:hidden;z-index:0;} .graysv video{ -webkit-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); } .graysv.cpsound video,.graysv:hover video:not([data-mouseout]){ -webkit-filter: none; -ms-filter: none; filter: none; } </style> 

Dan kita perlu file JS yang perlu dihubungkan sebelum tag tubuh penutup.

 <script src="/smartvideo.js"></script> 

Sumber untuk diunduh

Script berkumpul dengan tergesa-gesa!

Jika ada banyak yang tertarik, maka dimungkinkan untuk membuat perpustakaan lengkap dengan berbagai pengaturan dan meletakkannya di github!

Sekali lagi, jika seseorang tertarik pada sisi teknis JavaScript, tulis, saya bisa melukis kode JavaScript di artikel berikutnya (walaupun saya harus menyisirnya dengan baik dan membersihkannya sebelum itu! :-)

Poin-poin penting dari smartVideo:

1. Bekerja di bawah ponsel cerdas dan tablet.
2. Secara otomatis menghentikan video jika seseorang beralih ke panggilan atau beralih di antara tab browser.
3. Secara otomatis berhenti atau memulai video saat menggulir halaman!
4. Mulai mengunduh video dan poster hanya ketika video terlihat.

PS: Bagaimana cara memformat kode html smartVideo untuk pembaca layar?

Hormat kami, Pencipta Landing Designer untuk Freelancer CMS portofolio