Diskusi singkat tentang mengisi kekurangan video HTML5 di terminal seluler

Artikel ini memperkenalkan terminal seluler video HTML5 yang mengisi jebakan dan membagikannya kepada semua orang. Detailnya adalah sebagai berikut:

 <id video=gaya video=sesuai objek:isi putar otomatis webkit-playsinline playinline x5-video-player-type=h5 x5-video-player-fullscreen=true x5-video-orientation=porttraint src=video.mp4 />< /video><!-- kesesuaian objek: isi Konten video memenuhi seluruh wadah video poster:img.jpg Putar otomatis sampul video: Putar otomatis otomatis - Muat seluruh video saat halaman memuat meta - Hanya memuat metadata saat halaman tidak memuat apa pun - Jangan memuat video saat halaman dimuat tanpa suara: Ketika atribut ini disetel, ini menentukan bahwa keluaran audio video harus dibungkam webkit -playsinline playsinline : Pemutaran sebaris x5-video-player-type=h5 : Mengaktifkan pemutar H5 inti x5 x5-video-player-fullscreen=pengaturan layar penuh yang sebenarnya. Pengaturan benar dan salah akan menghasilkan tata letak yang berbeda. x5-video-orientation=porttraint: menyatakan arah yang didukung oleh pemutar. Nilai opsional adalah layar horizontal lanskap dan layar vertikal potret. Potret nilai default. Baik itu siaran langsung atau H5 layar penuh, umumnya diputar secara vertikal, tetapi atribut ini memerlukan tipe pemutar video x5 untuk mengaktifkan mode H5 -->

 <putar otomatis video></video>

Namun, di banyak browser seluler, operasi aktual pengguna (peristiwa standar seperti peristiwa touchend, klik, klik ganda, atau keydown) diperlukan untuk memicu panggilan ke video.play() agar dapat memutar audio dan video secara otomatis.

 dom.addEventListener('klik', fungsi () { video.play()})

Video.play() juga dapat dipicu di wx.ready()

 wx.siap(fungsi () { video.putar()})

Setel properti webkit-playsinline playsinline

 <video id=video webkit-playsinline diputar secara online /></video>

Saat memutar video di iOS Safari dan beberapa browser Android, video tidak dapat diputar di halaman h5, dan sistem akan secara otomatis mengambil alih video tersebut.

Jika Anda perlu memutar video di halaman h5, Anda perlu menambahkan webkit-playsinline ke tag video. Setelah iOS 10, Anda perlu menambahkan playsinline. Aplikasi ini juga perlu mendukung mode ini.

 tampilan web.allowsInlineMediaPlayback = YA;

Baik iOS Mobile QQ dan WeChat mendukung mode ini, tetapi Android WeChat menutup telepon.

Browser bawaan Android WeChat menggunakan kernel Tencent X5 dan tidak mengikuti standar X5web. Salah satunya adalah video layar penuh yang dipaksakan. Setelah video diputar maka akan muncul rekomendasi video milik QQ sendiri.

Dikatakan memiliki daftar putih, dan sumber daya video dalam daftar putih tidak akan dalam layar penuh. Namun Tencent tidak bisa lagi menambah daftar putihnya. Kencing, tidak ada solusi. . . . . .

Saat ini ada solusinya yaitu menggunakan h5 canvas untuk memutar video

Kesalahan yang ditemui saat menggunakan Canvas: video harus menambahkan atribut x5-video-player-type=h5, jika tidak, video akan tersangkut di terminal seluler dan tidak dapat diputar.

 <div class=wrapper> <video id=video style=display: tidak ada putar otomatis src=video.mp4 x5-video-player-type=h5></video> <canvas id=canvas></canvas></div> <skrip> var video = document.querySelector('#video') var canvas = document.querySelector('#canvas') var wrapper = canvas.parentNode var width = wrapper.offsetWidth var tinggi = wrapper.offsetHeight var ctx = c.getContext('2d') var time = null kanvas.lebar = lebar kanvas.tinggi = tinggi kanvas.addEventListener('klik', function () { video.play( ) }) video.addEventListener('play', function () { waktu = window.setInterval(function () { ctx.drawImage(v, 0, 0, lebar, tinggi); }, 20); }, salah); video.addEventListener('jeda', fungsi () { window.clearInterval(waktu); }, video.addEventListener('berakhir') , fungsi () { window.clearInterval(waktu }, false);</script>

Akhirnya, diketahui bahwa meskipun kanvas digunakan untuk memutar video, video yang direkomendasikan setelah pemutaran video layar penuh dapat diblokir di Android WeChat. Namun tidak ada cara untuk menonaktifkan masalah layar penuh saat memutar video. Masih mendapatkan daftar putih jahat. Ajukan keluhan. . . . . . . . . . . . . . . .

Yang lebih menyebalkan lagi adalah saya belum menemukan cara untuk memicu keluar layar penuh melalui js.

Saat memutar video di iOS, layar hitam akan muncul sebentar dan kemudian ditampilkan secara normal.

Larutan:

Tambahkan div di atas video dan isi dengan gambar untuk menciptakan ilusi pemuatan sebelum diputar. Kemudian dengarkan acara timeupdate dan hapus blok div ini saat video diputar.

 video.addEventListener('timeupdate', function(){ if(video.currentTime > 0,1){ posterImg.hidden(); }})

HTMLVideoElement dan HTMLAudioElement keduanya mewarisi dari HTMLMediaElement

 //Kesalahan media MediaObj.error; //null: normal MediaObj.error.code; //1. Penghentian pengguna 2. Kesalahan jaringan 3. Kesalahan penguraian 4. URL tidak valid //Keadaan media saat ini MediaObj.currentSrc; /Kembali ke Sumber Daya saat ini URLMediaObj.src = value; //Kembalikan atau atur sumber daya saat ini URLMediaObj.canPlayType(type); //Apakah sumber daya dalam format tertentu dapat diputar MediaObj.networkState; //0. Elemen ini tidak diinisialisasi 1. Normal tetapi tidak menggunakan jaringan 2. Data sedang diunduh 3. Sumber daya MediaObj.load() tidak ditemukan; //Muat ulang sumber daya yang ditentukan oleh src MediaObj.buffered; Kembali ke area buffer, TimeRangesMediaObj.preload; //none: jangan memuat metadata terlebih dahulu: memuat informasi sumber daya auto://ready state MediaObj.readyState; //2:HAVE_METADATA //3.HAVE_CURRENT_DATA //4.HAVE_FUTURE_DATA //5.HAVE_ENOUGH_DATAMediaObj.seeking; //Apakah sedang mencari//Status pemutaran MediaObj.currentTime = value; //Posisi bermain saat ini, tugas dapat mengubah posisi MediaObj .startTime; //Umumnya 0, jika itu adalah media streaming atau sumber daya yang tidak dimulai dari 0, itu bukan 0MediaObj.duration; //Aliran panjang sumber daya saat ini mengembalikan MediaObj.paused tak terbatas //Apakah akan menjeda MediaObj.defaultPlaybackRate = value ; //Default Untuk kecepatan pemutaran, Anda dapat mengatur MediaObj.playbackRate = value; //Kecepatan pemutaran saat ini, ubah segera setelah mengatur MediaObj.played; //Kembalikan area yang telah diputar, TimeRanges, lihat di bawah untuk objek ini MediaObj.seekable; //Kembalikan area yang dapat dicari TimeRangesMediaObj.ended; //Apakah akan mengakhiri MediaObj.autoPlay; //Apakah akan memutar MediaObj secara otomatis .loop; //Ya Putar ulang MediaObj.play(); //Putar MediaObj.pause(); //Jeda//Kontrol video MediaObj.controls;//Apakah ada bilah kontrol default MediaObj.volume = nilai; //Volume MediaObj.muted = nilai; //Mute//TimeRanges (wilayah) objek TimeRanges.length / /Wilayah Jumlah segmen TimeRanges.start(index) //Posisi awal area segmen indeks TimeRanges.end(index) //Posisi akhir bagian indeks //[★★★**Peristiwa terkait**★★★]//Distribusi peristiwa var eventTester = function(e){ Media.addEventListener(e, function(){ console.log ((new Date()).getTime(),e) },false);}//Pemantauan acara eventTester(loadstart); //Klien mulai meminta data eventTester(progress); //Klien meminta data eventTester(suspend); //Pengunduhan tertunda eventTester(batalkan); //Klien secara aktif menghentikan pengunduhan (bukan disebabkan oleh kesalahan) eventTester(loadstart); kemajuan) ; //Klien meminta data eventTester(menangguhkan); //Pengunduhan tertunda eventTester(batalkan); //Klien secara aktif menghentikan pengunduhan (bukan karena kesalahan), eventTester(kesalahan); //Terjadi kesalahan saat meminta data eventTester(terhenti); //Kecepatan jaringan terhenti eventTester(play); //EventTester(pause) terpicu saat play() dan putar otomatis mulai diputar; ); //Berhasil memperoleh panjang sumber daya eventTester(loadeddata); //eventTester(menunggu); //Menunggu data, bukan kesalahan eventTester(bermain); //Mulai pemutaran eventTester(canplay); //Dapat diputar, tetapi mungkin dijeda karena memuat eventTester(canplaythrough); //Dapat diputar, semua lagu telah dimuat eventTester(mencari); /Menemukan eventTester(timeupdate); //Waktu pemutaran diubah eventTester(berakhir); //Pemutaran berakhir eventTester(perubahan laju); //Laju pemutaran diubah eventTester(perubahan durasi); //Perubahan panjang sumber daya eventTester(perubahan volume);

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.