1. Pertama, tunjukkan gambar asli dari video rentetan itu, faktanya berbicara sendiri.
2. Tampilan kode
1> tampilan kode html
<div class=barrage> <video id=lebar putar otomatis video saya=100% tinggi=300px> <source src=video/1.mp4> </video> <div class=screen> <div class=content> <!- -Konten ditampilkan di sini--> </div> </div> <!--Kirim kotak dialog--> <div class=send> <input type=text class=s_text placeholder=Gunakan Enter untuk mengirim rentetan dengan cepat/> <input type=button class=s_btn value=Kirim/> <!--Tutup fungsi rentetan--> <span class=barrage_close>Tutup rentetan</span> < !-- Bisukan function--> <span id=muted>Aktifkan bisu</span> </div> </div>
2>tampilan kode css
*{ padding: 0; margin: 0;}input{ outline: tidak ada;}.barrage { posisi: relatif; lebar: 100%; tinggi: 250px;}#myvideo{ posisi: absolut; :300px; */ atas: -50px; kiri: 0; indeks-z: -1;}.barrage .screen { posisi: atas: 0px; kanan: 0px; lebar: 100%; tinggi: 300px;}.barrage .screen .content { posisi: relatif; lebar: 100%; tinggi: 250px latar belakang: #000; =100); *//***Untuk browser ie8 atau lebih tinggi atau lebih lama****/ warna latar: transparan; 1;}.barrage .screen .content div { posisi: absolut; ukuran font: 20 piksel; berat font: tebal; spasi putih: tinggi garis: 40 piksel; { posisi: absolut; bawah: 0px; lebar: 100%; tinggi: 55px; tinggi garis: 55px; 1; /*latar belakang: #000;*/ latar belakang: rgba(0,0,0,0.5); perataan teks: tengah; /*display: tidak ada;*/}.barrage:hover .send{ tampilan: blok; }.barrage .send .s_text { lebar: 60%; tinggi: 35 piksel; tinggi baris: 35 piksel; keluarga font: Microsoft Yahei; radius batas: 20 piksel; opasitas: 0,8;}.barrage .send .s_btn { lebar: 105 piksel; tinggi: 35 piksel; tinggi garis: 35 piksel; -radius: 10 piksel; 0.8;}.barrage_close,#muted { lebar: 80px; tinggi: 30px; tinggi garis: 30px; radius batas: 10px; perataan teks: warna: #22B14C; : 0.8;}#muted{ latar belakang:kuning;}.barrage_close1{ warna: #fff; latar belakang: #fff;}/* animasi css*/.content div{ animasi:Teks 15 detik normal tak terbatas;}@keyframes Teks{ 0%{ kiri:100%; } 20%{ kiri:75%; %{ kiri:0%; } 100%{ kiri:-30%;3>tampilan kode js
$(function () { $(.barrage_close).click(function(){ $(.content div).remove(); }); init_barrage();});//Masukkan konten rentetan ke dalam array untuk disimpan it var arr=[];var h=arr.push();// Pantau pengiriman, tekan enter untuk mengirim dokumen.οnkeydοwn=function(event){ var e = event || window.event; if(e && e.keyCode==13){ // console.log(11111); $(.send .s_btn).click();//Kirim komentar $(.send .s_btn ).klik(fungsi () { var teks = $(.s_text).val(); if (teks == ) { alert('Konten Anda kosong, harap isi komentar sebelum mengirim'); return false; + ;'class='content_text'> + teks + </div>); $(.content).append(_lable.show()); $(.s_text).val();});//Inisialisasi fungsi teknologi rentetan init_barrage() { var _top = 0; $(.content div).show().each(function () { var _left =$ ( .barrage).width();//Lebar maksimum browser (juga tinggi browser), sebagai nilai posisi kiri console.log(_left); =$(.barrage).height();//Tinggi maksimum jendela video console.log(_height); _top += 35; if (_top >= (_height - 150)) { _top = 0; ini ).css({ kiri: _kiri, atas: _atas, warna: getColor() }); // Munculkan teks secara teratur // var time = 10000; // if ($(ini).index() % 2 == 0) { // waktu = 15000; // } // $(ini).animate({ kiri: - + _kiri + px }, waktu, fungsi () { // $(this).remove(); // });}//Dapatkan warna acak function getColor() { return '#' + (function (h) { return new Array(7) - h.length).join(0) + h }) ((Math.random() * 0x1000000 << 0).toString(16))}var video=document.getElementById(myvideo);var mute=document.getElementById( diredam);console.log(diredam);//Setel kecepatan pemutaran video//video.playbackRate = 0.5;//Video bisu video.muted = false;mute.οnclick=function(){ if(video.muted){ video.muted = false; mute.innerText=''; / / console.log(1111) }else{ video.muted = true; mute.innerText=''; mute.innerText = 'Matikan bisu'; konsol.log(2222) }}3. Demonstrasi efek kode
<a style="margin: 0px; padding: 0px; outline: tidak ada; tinggi garis: 25.2px; ukuran font: 14px; lebar: 660px; overflow: tersembunyi; jelas: keduanya; font-family: tahoma, arial, Microsoft YaHei;"><div class=barrage> <video id=myvideo autoplay loop width=100% height=300px> <source src=video/1.mp4> </video></div><style> .barrage { posisi: lebar relatif; : 100%; tinggi:250 piksel;}#videosaya{ posisi: absolut; /* lebar: 100%; tinggi:300 piksel; -50 piksel; kiri: 0; indeks-z: -1;</gaya>MeringkaskanDi atas adalah fungsi rentetan video yang diterapkan dalam HTML5 yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!
Jika menurut Anda artikel ini bermanfaat bagi Anda, silakan cetak ulang, harap sebutkan sumbernya, terima kasih!