WXInlinePlayer
1.3.6
Avec l'essor des diffusions en direct et des courtes vidéos, la vidéo est devenue une méthode très courante de production d'informations opérationnelles/produits, car elle contient une plus grande quantité d'informations. Cependant, en raison des intérêts de divers fabricants de navigateurs nationaux, ils ont imposé de nombreuses restrictions aux capacités vidéo de HTML5, qui ne se limitent pas à :
Pour des questions spécifiques, veuillez vous référer à « Mise en œuvre du minage vidéo sur terminal mobile d'animation d'images complexes » rédigé par l'équipe IMWeb de Tencent.
Afin de résoudre ces problèmes, nous avons implémenté WXInlinePlayer par décodage logiciel FLV. La technologie tierce et l'API de plateforme utilisées sont les suivantes :
Parallèlement, nous avons également écrit la version WebAssembly de FLV Demuxer. Vous pouvez trouver le code correspondant dans lib/codec.
Le test de compatibilité utilise les modèles pertinents fournis par le service BrowserStack, à titre de référence uniquement :
https://eroszy.github.io/WXInlinePlayer/example/index.html
Veuillez vous assurer que vous avez installé parcel/emscripten 1.38.45/cmake et make, puis exécutez la commande suivante :
npm install # 初始化工程
npm update # 更新工程有关的插件。如果网络错误，改用 cnpm update
bash build.shLe produit final sera dans le dossier exemple.
Veuillez noter:
- Veuillez construire dans un environnement * nix. La compilation d'OpenH264 sous Windows n'est pas garantie.
- Veuillez vous assurer qu'emscripten est en version 1.38.45, sinon des erreurs wasm32 se produiront.
- la version de cmake doit être 3.16+
<!DOCTYPE html >
< html >
< head >
< meta charset =" UTF-8 " />
< title > WXInlinePlayer </ title >
< style >
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
</ style >
</ head >
< body >
< canvas id =" container " width =" 800 " height =" 450 " > </ canvas >
< script src =" ./index.js " > </ script >
< script >
if ( WXInlinePlayer . isSupport ( ) ) {
WXInlinePlayer . init ( {
asmUrl : './prod.baseline.asm.combine.js' ,
wasmUrl : './prod.baseline.wasm.combine.js'
} ) ;
WXInlinePlayer . ready ( ) . then ( ( ) => {
const player = new WXInlinePlayer ( {
url : 'https://static.petera.cn/mm.flv' ,
$container : document . getElementById ( 'container' ) ,
hasVideo : true ,
hasAudio : true ,
volume : 1.0 ,
muted : false ,
autoplay : true ,
loop : true ,
isLive : false ,
chunkSize : 128 * 1024 ,
preloadTime : 5e2 ,
bufferingTime : 1e3 ,
cacheSegmentCount : 64 ,
customLoader : null
} ) ;
const { userAgent } = navigator ;
const isWeChat = / MicroMessenger / i . test ( userAgent ) ;
if ( ! isWeChat ) {
alert ( 'click to play!' ) ;
document . body . addEventListener ( 'click' , ( ) => {
player . play ( ) ;
} ) ;
}
} ) ;
}
</ script >
</ body >
</ html >Dans le répertoire racine du projet, saisissez la commande pour démarrer le serveur :
npm run serveSaisissez ensuite l'URL pour accéder à la démo :
http://localhost:8888/example/index.html
Si l'environnement d'exécution actuel prend en charge WXInlinePlayer.
if ( WXInlinePlayer . isSupport ( ) ) {
console . log ( 'WXInlinePlayer support' ) ;
}Pour initialiser WXInlinePlayer, vous devez transmettre l'adresse spécifique de la bibliothèque de décodage H264 chargée. Pour la sélection de la bibliothèque de décodage, veuillez vous référer à : Comment choisir les dépendances de décodage.
if ( WXInlinePlayer . isSupport ( ) ) {
WXInlinePlayer . init ( {
asmUrl : './prod.baseline.asm.combine.js' ,
wasmUrl : './prod.baseline.wasm.combine.js'
} ) . catch ( e => {
console . log ( `WXInlinePlayer init error: ${ e } ` ) ;
} ) ;
}WXInlinePlayer est prêt et peut être initialisé en toute sécurité.
if ( WXInlinePlayer . isSupport ( ) ) {
WXInlinePlayer . init ( { /*.....*/ } ) ;
WXInlinePlayer . ready ( ) . then ( ( ) => {
console . log ( 'WXInlinePlayer ready' ) ;
} ) ;
}Constructeur WXInlinePlayer, veuillez vous référer à : Paramètres d'initialisation pour les paramètres d'initialisation associés.
WXInlinePlayer . ready ( ) . then ( ( ) => {
const player = new WXInlinePlayer ( { /*...*/ } ) ;
} ) ;pour la lecture vidéo. Il convient de noter qu'en raison des limitations du navigateur (à l'exclusion des versions de WeChat et Chrome inférieures à 66), les versions supérieures ont désactivé la lecture automatique de l'audio, donc appeler directement cette méthode peut ne pas être efficace. Veuillez cliquer sur/touchstart/touchend/touchmove, etc. déclencher activement des événements.
document . body . addEventListener ( 'click' , ( ) => {
player . play ( ) ;
} ) ;Arrête tout le lecteur et ne peut pas être repris.
player . stop ( ) ;Mettre en pause la lecture en cours.
player . pause ( ) ;Reprend une opération interrompue provoquée par une pause.
player . resume ( ) ;Obtenez/définissez le volume actuel.
const volume = player . volume ( ) ; // get volume
player . volume ( volume ) ; // set volumeObtenez/définissez le statut muet.
const muted = player . mute ( ) ; // get mute
player . mute ( muted ) ; // set muteDétruisez le lecteur et libérez toute la mémoire pour le recyclage.
player . destroy ( ) ;Obtenez la durée de lecture actuelle. Veuillez noter qu'il peut y avoir des valeurs négatives, veuillez donc les gérer avec précaution.
player . on ( 'timeUpdate' , ( ) => {
let currentTime = player . getCurrentTime ( ) ;
currentTime = currentTime <= 0 ? 0 : currentTime ;
} ) ;La durée de lecture peut être comprise comme la durée de mise en mémoire tampon.
player . on ( 'timeUpdate' , ( ) => {
const duration = player . getAvaiableDuration ( ) ;
} ) ; Il existe actuellement 3 ensembles de bibliothèques de décodage, à savoir :
La différence est :
Nous vous recommandons d'utiliser baseline.asm/baseline.wasm lorsque vous lisez des vidéos publicitaires/des vidéos marketing/des petites vidéos d'animation sensibles à la taille de la bibliothèque dépendante, et de l'utiliser lors de la lecture de vidéos à la demande/de vidéos en direct qui ne sont pas sensibles à la taille de la bibliothèque dépendante.
Sur la machine de développement, pour la même vidéo, les implémentations de WXInlinePlayer et FFMpeg telles que Taobao et Huajiao ont une utilisation de la mémoire et du processeur similaire. Les performances globales de WXInlinePlayer sont environ 5 à 10 % supérieures à celles de la solution FFMpeg, tandis que H265 a réduit le déblocage. Ses performances sont environ 30 % supérieures à celles de la solution FFMpeg. Voici une comparaison des performances de lecture du H265 :
Les décalages et retards de WXInlinePlayer proviennent principalement de trois endroits :
D'une manière générale, si l'environnement réseau de l'utilisateur est bon, il est difficile de provoquer un goulot d'étranglement dû à l'utilisation de WebGL dans le rendu (l'opération est très simple), ce qui provoque généralement des décalages et des retards constants en raison de performances de décodage logicielles insuffisantes.
Pour optimiser le retard provoqué par des performances de décodage soft insuffisantes, on part généralement de plusieurs endroits :
Actuellement, WXInlinePlayer peut décoder des vidéos de 1 280 x 720, de fréquence de code de 1 024 et de fréquence d'images de 24 ips sur des machines de milieu à haut de gamme de manière relativement fluide.
Concernant les paramètres vidéo mentionnés ci-dessus, vous pouvez les visualiser via FFmpeg :
ffmpeg -i " your.flv "Nous donnons ici le profil/fréquence d’images/taux de code/résolution des plates-formes grand public à titre de référence :
| plate-forme | taper | clarté | profil | Fréquence d'images | Taux de code | résolution |
|---|---|---|---|---|---|---|
| Dents de tigre | Écran horizontal | SD | Haut | vingt-quatre | 500k | 800x450 |
| Dents de tigre | Écran horizontal | HD | Haut | vingt-quatre | 1200k | 1280x720 |
| Dents de tigre | Écran vertical | HD | Principal | 16 | 1280k | 540x960 |
| Qixiu | Écran vertical | SD | Haut | 15 | 307k | 204x360 |
| Qixiu | Écran vertical | HD | Haut | 15 | 512k | 304x540 |
| Qixiu | Écran vertical | ultra clair | Référence | 15 | 1440k | 720x1280 |
| Tik Tok | Écran vertical | défaut | Haut | 30 | 1600k (plus de changements, pour référence seulement) | 720x1280 |
| travailleur rapide | Écran vertical | défaut | Haut | 25 | 2880k (plus de changements, pour référence seulement) | 720x1280 |
Nous vous recommandons :
Nos paramètres de configuration à faible latence couramment utilisés de WXInlinePlayer sont les suivants, à titre de référence uniquement. Veuillez les ajuster en fonction de la configuration de votre flux en direct/fichier à la demande :
{
chunkSize : 128 * 1024 ,
preloadTime : 5e2 ,
bufferingTime : 1e3 ,
cacheSegmentCount : 64 ,
}Dans le même temps, vous pouvez utiliser l'événement de performance pour déterminer les performances de décodage actuelles, puis inviter l'utilisateur et rétrograder vers votre solution de sauvegarde (telle que la lecture vidéo directe/les images statiques/les images de séquence, etc.) :
player . on ( 'performance' , ( { averageDecodeCost , averageUnitDuration } ) => {
const prop = averageUnitDuration / averageDecodeCost ;
if ( prop >= 2.0 ) {
console . log ( 'good performance' ) ;
} else if ( prop < 2.0 && prop >= 1.0 ) {
console . log ( 'ok, thats fine' ) ;
} else {
console . log ( 'bad performance' ) ;
}
} ) ; La solution FFmpeg présente actuellement plusieurs problèmes majeurs. Le premier est la taille de la bibliothèque de décodage, après réduction, elle est d'environ 2 Mo, et gzip est d'environ 600 Ko, ce qui est inacceptable pour les produits soucieux de la taille de la bibliothèque dépendante. Deuxièmement, la solution de FFmpeg est difficile à optimiser par vous-même. Par exemple, WXInlinePlayer effectuera le décodage de plusieurs travailleurs en 2.0, ce qui est très coûteux pour modifier une telle solution.
Les raisons des décalages et des retards sont compliquées. Pour WXInlinePlayer, la vitesse de décodage ne peut généralement pas suivre la vitesse de lecture. Veuillez vous référer à la façon de réduire les décalages et les retards pour l'optimisation.
iOS et Android UC ont castré WebAssembly/ASM.js, ils ne le prennent donc tout simplement pas en charge.
Veuillez utiliser FFmpeg ou d'autres outils similaires. Voici un exemple de commande simple :
ffmpeg -i " your.mp4 " -vcodec libx264 -acodec aac out.flvLa spécification FLV de WXInlinePlayer suit la spécification d'extension FLV de Kingsoft. Si vous devez effectuer un encodage associé, vous pouvez vous référer à son correctif FFmpeg associé ou à l'encodeur écrit par Kingsoft.
