WXInlinePlayer
1.3.6
Con el aumento de las transmisiones en vivo y los videos cortos, el video se ha convertido en un método muy común para generar información operativa/de producto porque contiene una mayor cantidad de información. Sin embargo, debido a los intereses de varios fabricantes de navegadores nacionales, han impuesto muchas restricciones a las capacidades de video de HTML5, que no se limitan a:
Para preguntas específicas, consulte "Implementación de animación de cuadros complejos para minería de video en terminales móviles" escrita por el equipo IMWeb de Tencent.
Para resolver estos problemas, implementamos WXInlinePlayer mediante decodificación suave FLV. La tecnología de terceros y la API de plataforma utilizada son las siguientes:
Al mismo tiempo, también escribimos la versión WebAssembly de FLV Demuxer. Puede encontrar el código relevante en lib/codec.
La prueba de compatibilidad utiliza los modelos relevantes proporcionados por el servicio BrowserStack, solo como referencia:
https://eroszy.github.io/WXInlinePlayer/example/index.html
Asegúrese de haber instalado Parcel/emscripten 1.38.45/cmake y make, luego ejecute el siguiente comando:
npm install # 初始化工程
npm update # 更新工程有关的插件。如果网络错误，改用 cnpm update
bash build.shEl producto final estará en la carpeta de ejemplo.
Tenga en cuenta:
- Compile en un entorno *nix. No se garantiza la compilación de OpenH264 en Windows.
- Asegúrese de que emscripten esté en la versión 1.38.45; de lo contrario, se producirán errores de wasm32.
- La versión de cmake debe ser 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 >En el directorio raíz del proyecto, ingrese el comando para iniciar el servidor:
npm run serveLuego ingrese la URL para acceder a la demostración:
http://localhost:8888/example/index.html
Si el entorno de ejecución actual admite WXInlinePlayer.
if ( WXInlinePlayer . isSupport ( ) ) {
console . log ( 'WXInlinePlayer support' ) ;
}Para inicializar WXInlinePlayer, debe pasar la dirección específica de la biblioteca de decodificación H264 cargada. Para seleccionar la biblioteca de decodificación, consulte: Cómo elegir las dependencias de decodificación.
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á listo y se puede inicializar de forma segura.
if ( WXInlinePlayer . isSupport ( ) ) {
WXInlinePlayer . init ( { /*.....*/ } ) ;
WXInlinePlayer . ready ( ) . then ( ( ) => {
console . log ( 'WXInlinePlayer ready' ) ;
} ) ;
}Constructor WXInlinePlayer, consulte: Parámetros de inicialización para conocer los parámetros de inicialización relacionados.
WXInlinePlayer . ready ( ) . then ( ( ) => {
const player = new WXInlinePlayer ( { /*...*/ } ) ;
} ) ;para reproducción de vídeo. Cabe señalar que debido a las limitaciones del navegador (excluidas las versiones WeChat y Chrome inferiores a 66), las versiones superiores han desactivado la reproducción automática de audio, por lo que llamar a este método directamente puede no ser efectivo. Haga clic en / touchstart / touchend / touchmove, etc. desencadenar eventos activamente.
document . body . addEventListener ( 'click' , ( ) => {
player . play ( ) ;
} ) ;Detiene todo el reproductor y no se puede reanudar.
player . stop ( ) ;Pausa la reproducción actual.
player . pause ( ) ;Reanuda una operación pausada causada por una pausa.
player . resume ( ) ;Obtener/configurar el volumen actual.
const volume = player . volume ( ) ; // get volume
player . volume ( volume ) ; // set volumeObtener/establecer el estado de silencio.
const muted = player . mute ( ) ; // get mute
player . mute ( muted ) ; // set muteDestruye el reproductor y libera toda la memoria para reciclarla.
player . destroy ( ) ;Obtenga el tiempo de reproducción actual. Tenga en cuenta que puede haber valores negativos, así que manéjelos con cuidado.
player . on ( 'timeUpdate' , ( ) => {
let currentTime = player . getCurrentTime ( ) ;
currentTime = currentTime <= 0 ? 0 : currentTime ;
} ) ;La duración reproducible puede entenderse como la duración del almacenamiento en búfer.
player . on ( 'timeUpdate' , ( ) => {
const duration = player . getAvaiableDuration ( ) ;
} ) ; Actualmente existen 3 conjuntos de bibliotecas de decodificación, a saber:
La diferencia es:
Recomendamos usar baseline.asm/baseline.wasm cuando reproduzca videos publicitarios/videos de marketing/pequeños videos de animación que sean sensibles al tamaño de la biblioteca dependiente, y usarlo cuando reproduzca videos bajo demanda/videos en vivo que no sean sensibles a el tamaño de la biblioteca dependiente all.asm/all.wasm.
En la máquina de desarrollo, para el mismo video, las implementaciones de WXInlinePlayer y FFMpeg como Taobao y Huajiao tienen un uso de memoria y un uso de CPU similares. El rendimiento general de WXInlinePlayer es aproximadamente un 5-10% mejor que la solución FFMpeg, mientras que H265 tiene un desbloqueo reducido. Su rendimiento es aproximadamente un 30 % mejor que el de la solución FFMpeg. La siguiente es una comparación del rendimiento de reproducción H265:
Los retrasos y retrasos de WXInlinePlayer provienen principalmente de tres lugares:
En términos generales, si el entorno de red del usuario es bueno, es difícil causar un cuello de botella debido al uso de WebGL en el renderizado (la operación es muy simple), lo que generalmente causa retrasos constantes debido a un rendimiento insuficiente de decodificación suave.
Para optimizar el retraso causado por un rendimiento insuficiente de la decodificación suave, generalmente comenzamos desde varios lugares:
Actualmente, WXInlinePlayer puede decodificar vídeos de 1280x720, velocidad de código de 1024 y velocidad de fotogramas de 24 fps en máquinas de gama media a alta con relativa fluidez.
Con respecto a los parámetros de video mencionados anteriormente, puedes verlos a través de FFmpeg:
ffmpeg -i " your.flv "Aquí proporcionamos el perfil/velocidad de fotogramas/velocidad de código/resolución de las principales plataformas como referencia:
| plataforma | tipo | claridad | perfil | Velocidad de fotogramas | Tasa de código | resolución |
|---|---|---|---|---|---|---|
| Dientes de tigre | pantalla horizontal | DAKOTA DEL SUR | Alto | veinticuatro | 500k | 800x450 |
| Dientes de tigre | pantalla horizontal | alta definición | Alto | veinticuatro | 1200k | 1280x720 |
| Dientes de tigre | pantalla vertical | alta definición | Principal | 16 | 1280k | 540x960 |
| Qixiu | pantalla vertical | DAKOTA DEL SUR | Alto | 15 | 307k | 204x360 |
| Qixiu | pantalla vertical | alta definición | Alto | 15 | 512k | 304x540 |
| Qixiu | pantalla vertical | ultra claro | Base | 15 | 1440k | 720x1280 |
| tik tok | pantalla vertical | por defecto | Alto | 30 | 1600k (más cambios, solo como referencia) | 720x1280 |
| trabajador rápido | pantalla vertical | por defecto | Alto | 25 | 2880k (más cambios, solo como referencia) | 720x1280 |
Te recomendamos:
Nuestros parámetros de configuración de baja latencia comúnmente utilizados de WXInlinePlayer son los siguientes, solo como referencia. Ajústelos de acuerdo con su configuración de transmisión en vivo/archivo bajo demanda:
{
chunkSize : 128 * 1024 ,
preloadTime : 5e2 ,
bufferingTime : 1e3 ,
cacheSegmentCount : 64 ,
}Al mismo tiempo, puede usar el evento de rendimiento para determinar el rendimiento de decodificación actual, luego avisar al usuario y cambiar a su solución de respaldo (como reproducción directa de video/imágenes estáticas/cuadros de secuencia, 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 solución FFmpeg actualmente tiene varios problemas importantes. El primero es el tamaño de la biblioteca de decodificación, que es de aproximadamente 2 M, y gzip es de aproximadamente 600 k. Esto es inaceptable para productos que se preocupan por el tamaño de la biblioteca dependiente. En segundo lugar, la solución de FFmpeg es difícil de optimizar usted mismo. Por ejemplo, WXInlinePlayer realizará la decodificación de varios trabajadores en 2.0, lo que resulta muy costoso para modificar dicha solución.
Los motivos de los retrasos y los retrasos son complicados. Para WXInlinePlayer, la velocidad de decodificación generalmente no puede seguir el ritmo de la velocidad de reproducción. Consulte cómo reducir los retrasos y los retrasos para la optimización.
Tanto iOS como Android UC han castrado WebAssembly/ASM.js, por lo que simplemente no lo admiten.
Utilice FFmpeg u otras herramientas similares. Aquí hay un ejemplo de comando simple:
ffmpeg -i " your.mp4 " -vcodec libx264 -acodec aac out.flvLa especificación FLV de WXInlinePlayer sigue la especificación de expansión FLV de Kingsoft. Si necesita realizar una codificación relacionada, puede consultar su parche FFmpeg relacionado o el codificador escrito por Kingsoft.
