h5视频播放方案（优化版）

一、视频播放

1、上一版方案中存在的问题：在之前的方案中，ios端的微信浏览器，是用canvas来绘制video，用ctx.drawImage(video,0,0,widht,height)去循环更新canvas画布，实现播放视频的，微信浏览器出现了黑屏的现象？

原因：是因为微信对音频限制，不能让音频/视频自动播放，必须要用户进行点击/触摸等操作后才能播放。

解决办法：把首页和视频放在同一个页面，一开始让视频隐藏，点击开始时显示并播放视频。不过这样还存在一个问题，视频会自动浮出页面，不在同一层播放，这是因为微信h5浏览器导致的，需要设置webkit-playsinline和playsinline这两个属性来解决。代码如下：

    //解决微信video不在同一层的问题
	this.video.setAttribute('webkit-playsinline', 'true');
	this.video.setAttribute('playsinline', 'true');

2、优化后的方案：上一版解决方案中（移动端视频播放方案-优快云博客），我使用了三种办法来解决ios、安卓在微信浏览器和其他浏览器播放视频的问题，虽然能够解决问题，但是这种办法太繁琐了，于是这次对上次的方案进行了优化，现在只需要使用一种办法就可以实现视频的播放。这次只使用了JSMpeg这个库来实现播放视频，与之前的区别主要在于：解决了ios端视频无声音的bug，从而实现了ios、安卓在各种浏览器下的都能正常的播放视频。代码如下：

             //点击按钮触发play方法
            play() {
                this.show = true;
                this.videoPlay();
            },
            //安卓和ios通用的设置视频的方法
            videoPlay() {
                //这里必须使用同一个域名下的视频文件，不然会跨域，这是由JSMpeg内部的请求导致的
                const url = "https://jieshibang.jdpes.cn/video_test/wait.ts";
                const container = document.getElementsByClassName("container_video");
                this.canvas = document.createElement("canvas");
                container[0].appendChild(this.canvas);
                // 设置canvas的宽度，这个设置的越大，画面越清晰，最好是视频大小（相当于绘制的图像大，然后被css缩小）
                this.canvas.width = 750;
                this.canvas.height = 1624;
                //设置canvas宽高、裁剪视频，避免拉伸
                this.canvas.style.width = "100vw";
                this.canvas.style.height = "auto";
                this.player = new JSMpeg.Player(url, {
                    canvas: this.canvas,
                    loop: false,
                    autoplay: true,
                    disableGl: false,
                    audio: true,
                    onEnded: () => {
                        this.next(); //视频结束时跳转
                    },
                    onPlay: () => {
                        this.hidden(); //隐藏填充ios黑屏的预览图 
                    }
                });
              	// 解锁声音
				this.player.audioOut.unlock(() => {
					this.player.volume = 1;
				})
            },
            hidden() {
                const poster = document.getElementById('poster');
                poster.style.display = 'none';
            },
            next() {
                //停止播放
                this.player.destroy();
                this.player = null;
                uni.redirectTo({
                    url: "/pages/home/index"
                })
            },

二、视频格式转换

问题：如何把MP4等格式的视频转换成ts格式的视频？

解决办法：使用ffmpeg转换。

使用步骤：

1、访问Builds - CODEX FFMPEG @ gyan.dev，下载ffmpeg压缩包

2、在环境变量的系统变量path中，在自己的安装路径下的bin的路径进行新建

如：D:\Software\ffmpeg-6.1.1-essentials_build\bin

3、打开命令行，输入ffmpeg -version。打印出 FFmpeg 版本，则表示 FFmpeg 安装成功。

4、在视频文件所在目录下的命令行中使用以下命令：

ffmpeg -i wait.mp4 -f mpegts -codec:v mpeg1video -s 750x1624 -b:v 4000k -r 24 -bf 0 -codec:a mp2 wait.ts

//基本参数
-i input_file：指定输入文件，可以是本地文件或远程URL。
-f format：指定输出文件格式，例如：mp4、avi、mov等。
-y：覆盖输出文件。
-n：不覆盖输出文件。
-vn: 禁止输出视频
-an：禁止输出音频
-sn: 禁止输出字幕
//视频参数
-c:v codec：指定视频编码器，例如：libx264（H.264编码器）或vp9（Google VP9编码器）。
-b:v bitrate：指定视频比特率，即视频的压缩率。值越高，视频质量越好，但文件大小也越大。
-crf quality：指定视频质量，即压缩比。值越小，视频质量越好，但文件大小也越大。
-s size：指定视频分辨率，例如：1280x720或1920x1080。
-r fps：指定视频帧率，即每秒钟显示的帧数。
-aspect aspect_ratio：指定视频宽高比，例如：16:9或4:3。
-profile:v profile_name：指定视频编码器的配置文件，例如：high表示高级配置文件。
-level:v level_value：指定视频编码器的级别，例如：4.1表示H.264编码器的4.1级别。
-maxrate:v max_bitrate：指定视频的最大比特率，例如：1000k表示最大每秒使用1000K位的比特率。
-bufsize:v buffer_size：指定视频码率控制缓冲区大小。
-vf filter：指定视频过滤器，例如：scale、rotate等。
-ss start_time：指定从输入文件的哪个时间点开始转码。
-t duration：指定转码的时长。
-map [input_file_id:stream_specifier]：指定输出文件中包含哪些流，例如：-map 0:v:0表示将输入文件中的第一个视频流复制到输出文件中。
-pix_fmt format：指定视频的像素格式，例如：yuv420p表示4:2:0格式。
//音频参数
-c:a codec：指定音频编码器，例如：aac（Advanced Audio Coding）或mp3（MPEG Audio Layer III）。
-b:a bitrate：指定音频比特率，即音频的压缩率。值越高，音频质量越好，但文件大小也越大。
-c:a copy 表示直接复制音频流，不进行任何编码或处理。
-ar sample_rate：指定音频采样率，即每秒钟采样的次数。
-ac channels：指定音频声道数，例如：1（单声道）或2（立体声）。
-af filter：指定音频过滤器，例如：volume=2表示将音量增加2倍。
-ss start_time：指定从输入文件的哪个时间点开始转码。
-t duration：指定转码的时长。
-map [input_file_id:stream_specifier]：指定输出文件中包含哪些流，例如：-map 0:a:0表示将输入文件中的第一个音频流复制到输出文件中。
//其他参数
-preset preset_name：指定编码速度和质量的预设值，例如：slow表示慢速但高质量的编码。
-tune tuning_parameter：指定编码器的调整参数，例如：film表示适用于电影的参数。
-threads threads_count：指定线程数，即并行处理的线程数。
-shortest：当多个流转码时，输出文件的长度将是最短的流的长度。
-movflags flag1,flag2,...：指定输出文件的MOV标志，例如：faststart表示使用快速启动。
-pix_fmt format：指定像素格式，例如：yuv420p表示4:2:0格式。
-f segment：指定输出文件的分段格式。
-segment_time duration：指定分段的时长。
-segment_wrap number：指定分段时循环的次数。
-hls_time duration：指定HLS（HTTP Live Streaming）流的分片时长。
-hls_list_size size：指定HLS流的播放列表大小。
-hls_segment_filename file_name：指定HLS流分片的文件名格式。