Question

在尝试创建播放流媒体的功能时，我遇到了问题。在流模式下播放视频/音频时，不同的浏览器和/或移动设备会遇到各种问题。

目前，我具有以下捆绑包： 1）使用ffmpeg，我将视频分成曲目并将其分成片段 2）我手动创建master-m3u8文件以进一步播放 3）我使用mediaelement.js，尝试通过多个选项播放接收到的视频文件。

所以。 1）使用ffmpeg，我会像这样中断所有输入视频：

ffmpeg -i '/home/mishkapetran/Загрузки/Rick.mkv' \
-map 0:v:0 -c:v libx264 -profile:v baseline -preset:v superfast -b:v 1000k -level 3.0 -strict -2 -s 480x360 -f hls -hls_time 10 -hls_list_size 0 -segment_list rick_360p -hls_segment_filename /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_360p_video_%d.ts /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_360p_video.m3u8 \
-map 0:v:0 -c:v libx264 -profile:v baseline -preset:v superfast -b:v 1000k -level 3.0 -strict -2 -s 858x480 -f hls -hls_time 10 -hls_list_size 0 -segment_list rick_480p -hls_segment_filename /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_480p_video_%d.ts /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_480p_video.m3u8 \
-map 0:v:0 -c:v libx264 -profile:v baseline -preset:v superfast -b:v 1000k -level 3.0 -strict -2 -s 1280x720 -f hls -hls_time 10 -hls_list_size 0 -segment_list rick_720p -hls_segment_filename /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_720p_video_%d.ts /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_720p_video.m3u8 \
-map 0:1 -c:a aac -b:a 128k -ar 44100 -ac 2 -f hls -hls_time 10 -hls_list_size 0 -segment_list rick_audio_rus -hls_segment_filename /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_rus_audio_%d.aac /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_rus_audio.m3u8 \
-map 0:2 -c:a aac -b:a 128k -ar 44100 -ac 2 -f hls -hls_time 10 -hls_list_size 0 -segment_list rick_audio_eng -hls_segment_filename /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_eng_audio_%d.aac /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_eng_audio.m3u8 \
-map 0:3 -f webvtt /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_sub_rus.vtt \
-map 0:4 -f webvtt /home/mishkapetran/m3u8_test/hls_test/video_stream_source/rick_sub_eng.vtt

2）由于无法与HTML播放器中的mediaelement.js一起提供选择音轨的选项，因此我们通过组合不同的分辨率和音轨创建了多个master-m3u8文件，事实证明像这样 360p_eng.m3u8、360p_rus.m3u8、480p_eng.m3u8、480p_rus.m3u8、720p_eng.m3u8、720p_rus.m3u8

里面看起来像这样：

#EXTM3U
#EXT-X-VERSION:5
#EXT-X-MEDIA:TYPE=AUDIO,GROUP-ID="audio",NAME="eng",LANGUAGE="eng",AUTOSELECT=YES,DEFAULT=YES,URI="rick_eng_audio_.m3u8"
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="eng",DEFAULT=NO,FORCED=NO,AUTOSELECT=YES,LANGUAGE="eng",URI="rick_sub_eng.vtt"
#EXT-X-MEDIA:TYPE=SUBTITLES,GROUP-ID="subs",NAME="rus",DEFAULT=NO,FORCED=NO,AUTOSELECT=YES,LANGUAGE="rus",URI="rick_sub_rus.vtt"
#EXT-X-STREAM-INF:BANDWIDTH=3000000,CODECS="avc1.42c00d,mp4a.40.2",RESOLUTION=480x360,AUDIO="audio",SUBTITLES="subs"
JKVHKVOF_360p_video.m3u8

3）全部放入index.html

<!DOCTYPE html>
<html>
<head>
    <title>Video player</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/mediaelement@4.2.9/build/mediaelementplayer.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/quality/quality.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.10/mediaelement-and-player.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement-plugins/2.5.0/quality/quality.min.js"></script>
</head>
<body>
<video id="stream_video_tag" width="800" height="600" controls>
  <source src="360p_rus.m3u8" type="application/x-mpegURL" data-quality="360-rus">
  <source src="480p_rus.m3u8" type="application/x-mpegURL" data-quality="480-rus">
  <source src="720p_rus.m3u8" type="application/x-mpegURL" data-quality="720-rus">
  <source src="360p_eng.m3u8" type="application/x-mpegURL" data-quality="360-eng">
  <source src="480p_eng.m3u8" type="application/x-mpegURL" data-quality="480-eng">
  <source src="720p_eng.m3u8" type="application/x-mpegURL" data-quality="720-eng">
  <track src="rick_sub_eng.vtt" srclang="en" label="English" kind="subtitles" type="application/octet-stream">
  <track src="rick_sub_rus.vtt" srclang="ru" label="Russian" kind="subtitles" type="application/octet-stream">
</video>


<script type="text/javascript">
    window.player = new MediaElementPlayer('stream_video_tag', {
        features: ['playpause', 'progress', 'current', 'duration', 'volume', 'fullscreen', 'tracks', 'quality'],
                  defaultVideoWidth: '100%',
                  defaultVideoHeight: '100%',
                  defaultAudioWidth: '100%',
                  defaultAudioHeight: '100%',
                  loop: false,
        success: function () {
            console.log("SUCCESS MediaElement");
        },
        error: function (err) {
            console.error("CAN'T PLAY TORRENT MediaElement", err);
        }
    });
    window.player.play();
</script>
</body>
</html>

根据2个问题的结果： 1）以这种形式，它可以在除android之外的所有设备上重现。尽管播放视频的成功率很高，但不允许选择分辨率之间的切换，因此没有频段，也没有声音。另外，还存在未解决的问题。 2）Ffmpeg仅在运行所有视频之后才将信息写入字幕文件，这意味着在此文件之前的所有时间都是尘土飞扬的。如果字幕也分成多个片段，则处理速度将从2.5倍降低到0.5倍，这是不可接受的，并且服务器负担很重。有什么想法让所有设备都通用吗？

通用流媒体方法（适用于台式机和移动设备）

0 个答案: