wechatVideoExample
1.0.0
Uji kode sumber untuk memutar video di WeChat: Karena WeChat menggunakan browser X5, berbagai masalah aneh terjadi saat menggunakan tag video untuk memutar video. Kode sumber ini merupakan kode sumber tentatif yang dibuat dalam proses penyelesaian masalah ini. Ini mencakup berbagai kasus pengujian: menggunakan kanvas untuk memutar video, menggunakan gambar untuk memutar video, menggunakan tag x5, dll. Pustaka kode sumber yang tersedia ini dapat dipertahankan, dan siswa yang berminat dapat mengunduhnya sendiri.
###Setelah mengunduh pendahuluan, buat direktori baru di host dan salin semua kode sumber ke direktori ini. Gunakan browser WeChat untuk mengakses halaman html di dalamnya untuk menguji.
Penulis chenjsh36 Tim Teknologi Pengalaman Data Keuangan Ant
Dengan munculnya era lalu lintas dan peningkatan teknologi perangkat keras, semakin banyak situs web yang berharap dapat memutar video mereka sendiri di PC atau terminal seluler. Peningkatan kompatibilitas <video> secara bertahap membuat pengembang lebih bersedia untuk menerapkan video skenario pemutaran.
Artikel ini terutama mencantumkan skenario umum untuk pemutaran video dan kendala yang dihadapi di setiap skenario. Diharapkan dapat membantu pengembang untuk memilih solusi teknis yang tepat dengan lebih cepat dan mengurangi kendala saat menghadapi perkembangan permintaan__.
atribut autoPlay Boolean; bila ditentukan, video akan segera diputar secara otomatis dan tidak akan berhenti menunggu data dimuat.
Putar otomatis video dapat memutar video secara otomatis ketika halaman terbuka dan sumber daya cukup dimuat, sehingga mengurangi interaksi satu klik pengguna. Ini juga dapat diterapkan pada latar belakang dinamis dan fungsi panggilan video tiruan H5. Namun, karena berbagai alasan, pemutaran otomatis memiliki tingkat batasan yang berbeda-beda baik pada PC maupun terminal seluler.
Pada awalnya, tag video isyarat pengguna diperlukan untuk diputar; mulai dari versi 10 , aturan video diubah, dan Apple melonggarkan inline dan putar otomatis . Strateginya adalah sebagai berikut (hanya berlaku untuk browser Safari):
<video> akan diizinkan autoplay tanpa isyarat pengguna jika media sumbernya tidak berisi trek audio (elemen video tanpa sumber audio mengizinkan putar otomatis).<video muted> juga akan diizinkan untuk diputar otomatis tanpa isyarat pengguna.<video> mendapatkan trek audio atau tidak dibisukan tanpa isyarat pengguna, pemutaran akan dijeda.<video autoplay> hanya akan mulai diputar saat terlihat di layar seperti saat di-scroll ke area pandang, dibuat terlihat melalui CSS, dan dimasukkan ke dalam DOM (elemen video hanya akan mulai diputar saat terlihat di layar)<video autoplay> akan dijeda jika tidak terlihat, misalnya karena di-scroll keluar dari area pandang. __Early__ juga memerlukan gerakan pengguna untuk memutar; Chrome 53 Android kemudian melonggarkan kebijakan putar otomatis. Kebijakan ini berbeda dari Safari iOS. Anda perlu menyetel putar otomatis dan mematikan suara (apakah suara dibisukan) pada video secara bersamaan untuk memungkinkan otomatis. pemutaran; __FireFox dan UC BrowserAndroid__ mendukung pemutaran otomatis dalam kondisi apa pun;
Pada awalnya, putar otomatis didukung, namun baru-baru ini Safari dan Chrome secara berturut-turut memodifikasi strategi putar otomatis mereka...
__Safari 10 dan yang lebih baru__Video dan audio dengan audio dinonaktifkan secara default dari pemutaran otomatis .
Putar otomatis di bawah Chrome (versi lama):
Safari (posting 10) tidak diputar secara otomatis:
Video dengan suara yang diredam masih dapat diputar. Video dengan suara akan diputar secara otomatis berdasarkan __Indeks Partisipasi Media__. Penjelasan resmi dan dimensi terkait diberikan:
MEI adalah indeks yang mengevaluasi partisipasi media pengguna di situs saat ini. Hal ini bergantung pada dimensi berikut:
- Pengguna tetap berada di media selama lebih dari 7 detik
- Audio harus ditampilkan dan tidak dibisukan
- Berinteraksi dengan video
- Ukuran media tidak boleh lebih kecil dari 200x140.
Setelah membaca ini, pemikiran pengembang adalah sebagai berikut:
Untungnya, Safari dan Chrome, meskipun membatasi pemutaran otomatis, menyediakan mekanisme untuk mendeteksi apakah video dapat diputar secara otomatis, sehingga pengembang dapat memiliki alternatif ketika mereka menemukan bahwa pemutaran otomatis tidak dapat dilakukan:
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.catch(error => {
// Auto-play was prevented
// Show a UI element to let the user manually start playback
}).then(() => {
// Auto-play started
});
}
karena dapat mengganggu, haus data, dan banyak pengguna yang tidak menyukainya . (Karena dapat mengganggu, haus data, dan banyak pengguna yang tidak menyukainya.)
Saya menemukan bahwa H5 yang diputar secara otomatis sering kali terlihat di WeChat. Namun, contoh pemutaran video yang ditulis oleh penulis dengan putar otomatis dan playInline masih tidak dapat diputar secara otomatis di WeChat, tetapi dapat diputar secara otomatis di DingTalk.
| Peramban Sistem | dengan suara | tanpa suara |
|---|---|---|
| iOS DingTalk | mendukung | mendukung |
| Safari iOS | melarang | Putar otomatis |
| IOS WeChat | melarang | melarang |
Melalui menanyakan informasi, pengembangan IOS WebAPP didasarkan pada kernel browser yang disediakan oleh IOS , sehingga kinerja pemutaran otomatis dapat dimodifikasi di tampilan web WebAPP. DingTalk jelas mendukung pemutaran otomatis, sedangkan WeChat melarang pemutaran otomatis, tetapi menyediakan Bawaan acara untuk mendukung putar otomatis:
Pemutaran otomatis melalui acara WeixinJSBridgeReady di WeChat:
document . addEventListener (
'WeixinJSBridgeReady' ,
function ( ) {
video . play ( ) ;
} ,
false
) ; Di browser seluler, ketika pengguna mengklik untuk memutar atau memicu pemutaran melalui API video.play(), video akan dipaksa untuk diputar dalam layar penuh di atas pengalaman pengguna yang lebih baik, namun terkadang pengembang ingin dapat mengontrol apakah akan menggunakan layar penuh untuk memenuhi kebutuhan lainnya.
Jika Anda ingin mendapatkan pemutaran non-layar penuh, cukup tambahkan atribut playsinline ke tag video. Atribut ini pada dasarnya tidak ada masalah di browser seluler berdasarkan kernel webkit .
< video
src = {videoUrl}
webkit-playsinline =" true "
playsinline =" true "
/>Lalu bagaimana cara mengatasi browser dengan kernel lain? Saat ini, Anda perlu memahami browser apa saja yang saat ini ada di pasaran.
Pertama-tama, Anda perlu mengetahui empat inti browser saat ini di dunia:
di dalam:
Browser PC domestik umum seperti UC Browser, QQ Browser, Baidu Mobile Browser, 360 Secure Browser, Google Chrome, Sogou Mobile Browser, Cheetah Browser, dan UC seluler, QQ, Baidu dan browser seluler lainnya memiliki kernel yang dimodifikasi berdasarkan Webkit , kita dapat berpikir bahwa pengguna seluler di pasar pada dasarnya menggunakan kernel webkit atau browser yang dimodifikasi berdasarkan kernel webkit, sehingga kompatibilitas playsinline sangat baik!
Elemen video menyediakan beberapa peristiwa perilaku bagi pengembang untuk mengontrol pemutaran video. Elemen yang memiliki kompatibilitas yang baik mencakup onended , __ontimeupdate, onplay, onplaying, dll. __Beberapa peristiwa berperilaku tidak konsisten di berbagai browser dan perangkat berbeda.
Misalnya: memantau ' canplay ' di iOS (apakah cukup data yang di-buffer untuk kelancaran pemutaran) tidak akan dipicu saat memuat, meskipun __preload="auto" __ tidak berguna, tetapi di debugger Chrome di PC Berikutnya, itu akan menjadi dipicu selama fase pemuatan. ios perlu dimainkan sebelum dapat dipicu.
Pemuatan selesai:
Klik untuk memutar:
Pemuatan selesai:
Klik untuk memutar
Pemuatan selesai:
Klik untuk memutar:
Beberapa peristiwa memiliki karakteristik tampilan yang tidak konsisten pada sistem, perangkat, dan browser yang berbeda, jadi berhati-hatilah saat menggunakannya.
Dengan kontrol yang ditambahkan ke atribut ini, Gecko akan memberikan kontrol pengguna, memungkinkan pengguna mengontrol pemutaran video, termasuk volume, melintasi bingkai, dan menjeda/melanjutkan pemutaran.
Atribut kontrol menentukan bahwa browser harus menyediakan kontrol pemutaran untuk video, jika tidak, kontrol pemutaran akan disembunyikan, sehingga pengembang dapat menyesuaikan kontrol pemutarannya sendiri. Menyembunyikan kontrol pemutaran memiliki kompatibilitas yang baik pada terminal seluler PC dan iOS. Namun, menyembunyikan kontrol tidak didukung pada terminal seluler Android, namun masih dapat dicapai melalui beberapa metode.
Metode yang lebih rumit adalah memperbesar video dan memindahkan bilah kontrol keluar dari bidang pandang untuk mendapatkan efek tersembunyi! Faktanya, elemen video dibuat lebih besar dari wadah induk, sehingga bilah kontrol bawah berada di luar wadah induk, dan kemudian wadah induk disetel ke: overflow: tersembunyi, metode untuk menyembunyikan kontrol pemutaran! Kerugiannya adalah video akan diperbesar, dan Anda harus menyisakan ruang kosong terlebih dahulu untuk memperbesar.
Tim kernel x5 dari tim android Tencent telah melonggarkan pembatasan pemutaran video. Video tidak serta merta menyebut pemutar video mereka yang banyak dikritik. Mereka menggunakan atribut __x5-video-player-type="h5" untuk menyembunyikan elemen kontrol dan di pada saat yang sama __Video tidak lagi berada di atas, sehingga elemen lain dapat melayang di atas .
Setelah memahami skenario umum dan kendala umum dalam pemutaran video, kami dapat meningkatkan pengalaman pengguna dengan memberikan solusi yang sesuai untuk berbagai skenario. Misalnya, halaman H5 yang diputar secara otomatis di terminal seluler dapat secara tidak langsung memicu pemutaran video dengan mengarahkan pengguna untuk mengklik atau menggeser. Ini adalah pendekatan paling konservatif, tidak ada bug! Solusi yang lebih baik adalah memutar secara otomatis secara default dan menangkap situasi di mana pemutaran dilarang, lalu memandu pengguna untuk berinteraksi guna mencapai pemutaran video.
gunakan video Pada awalnya, pemutaran video di terminal seluler sangat dibatasi karena melibatkan konsumsi kinerja tinggi, konsumsi lalu lintas tinggi, dan pertimbangan pengalaman pengguna. Namun, seiring dengan peningkatan kinerja ponsel, munculnya era lalu lintas, dan pemandangan yang lebih kuat persyaratan, Pembatasan telah dilonggarkan secara bertahap, sementara di sisi PC secara bertahap Secara bertahap dari "generasi longgar" ke "generasi ketat", keduanya terus memperbarui strategi mereka dengan tujuan memberikan pengalaman yang lebih baik kepada pengguna di masa depan, mereka mungkin menjadi satu kesatuan, dan pengembang dapat memulai dari adaptasi kompatibilitas yang mendasarinya .Lepaskan agar Anda memiliki lebih banyak energi untuk melakukan pekerjaan tingkat yang lebih tinggi.
Jika Anda tertarik dengan tim kami, Anda dapat mengikuti kolom, mengikuti github atau mengirimkan resume Anda ke 'tao.qit####alibaba-inc.com'.replace('####', '@'). Siapapun yang mempunyai cita-cita luhur dipersilakan untuk bergabung ~
Alamat asli: https://github.com/ProtoTeam/blog/blob/master/201806/1.md
