'JS里使用window.open()打开视频只有声音,没有画面'的问题

问题排查

视频从客户手机上传至Apache服务器后,在浏览器中通过JS代码window.open()来打开视频URL,正常视频可以播放出来,但是某个视频只有声音,画面是黑屏。

1. 怀疑视频文件有问题 -》从服务器下载到本地播放正常,排除这个问题;

2. 怀疑window.open()接口无法打开这个视频,改用ckplayer打开 -》 无画面,有声音,排除这个问题。

后来在ckplayer官网的‘常见问题’一栏中发现出现该问题的原因:

 

常见的视频编码有H.264、H.265。而网页播放器对H.264格式的视频支持较好。

黑屏视频的编码如下图所示:

基本上,H.264 = AVC = AVC1,H.265 = HEVC(简称HVC)。 H.265视频编码标准出现得较晚,相较H.264而言有许多特性上的改变。

到此觉得是视频编码格式导致网页播放器播放黑屏的问题,后面只需把视频转码成H.264格式。另外由于项目需要,咱们的服务器要用PHP调用转码工具对每隔上传视频进行转码,所以决定在服务器上安装FFmpeg转码工具。

安装环境

Linux CentOs7

安装步骤

开发环境:

编译FFmpeg的好处:相较于yum、编译来的工具是官网上的最新发布版;使工具只包含指定功能,如该工具不许具备转换音频或者转换成其它视频格式,而只要转换成H.264格式的功能。

(1)yum install yasm  —— 安装汇编编译器,加快后面编译FFmpeg的速度;

(2)wget ftp://ftp.videolan.org/pub/x264/snapshots/last_x264.tar.bz2 

    解压后进入目录

    ./configure --enable-shared --disable-asm

    make

    make install  —— 编译得到‘x264’转码工具和‘libx264.so.157’转码库,后期搭建生产环境用到

(3)wget https://ffmpeg.org/releases/ffmpeg-4.1.3.tar.bz2

   ./configure --enable-gpl --enable-libx264 —— 生成makefile文件

   make

   make install

   由于ffmpeg运行需要libiconv.so,所以在/etc/profile中为LD_LIBRARY_PATH添加上'/usr/local/lib'路径

   ldconfig

生产环境:

(1)将编译好的ffmpeg可执行文件放入生产环境中的’/usr/local/bin/‘目录下;libiconv.so和编译好的libx264.so库文件放入操作系统的默认库目录下。

 使用ffmpeg

1. 拍照片

  ffmpeg -i ./video.mp4 -f image2 -ss 2 -vframes 1 -s 720x576 -an picShot.jpg

  -ss —— 拍第几秒

  -vframes%0d合用 —— 前者控制输出jpg的数量、后者控制名称格式化,如 -vframes 5 -ss 2 picShot_%0d.jpg,就会输出第2秒的第1~5桢共五张图片

  -f —— image2指定拍照片;

  -s —— 设置解析度;

  -an —— 不要声音;

2. 转换成H.264格式的MP4

  ffmpeg -i 视频源路径 -vcodec libx264 -preset ultrafast -b:v 2000k 视频目标路径

  -b:v —— 码率,值越低转码后的文件越小

  -preset —— 编码速度

  -vcodec —— 指定影像部分的编码格式

参考

https://www.cnblogs.com/subo_peng/p/6732826.html —— 安装ffmpeg的详细步骤

https://blog.csdn.net/Lyman_Ye/article/details/80305904 —— ffmpeg转换命令详细参数介绍

猜你喜欢

转载自www.cnblogs.com/yichi/p/10737307.html
今日推荐