Sur d’autres sites (12568)

• HTML5 video player some mp4 files not playing chrome

  1er juillet 2020, par Marc

  So I'm trying to build a personnal streaming platform and I've done my best to follow the recommandations I've found everywhere for better compatibility/quality when streaming.

  



  So I'm systematically encoding my video to video codec h264 with mp4 container with ffmpeg using this command :

  



  ffmpeg -i input -vcodec libx264 -maxrate 8000k -bufsize 1000K -minrate 10k -crf 24 -ab 192k -movflags faststart output.mp4


  



  However, I occasionaly fall on some reluctant mp4 that will play fine on Edge and Firefox but won't on Chrome. Loading seems to be processed fine as I can see the total duration in the controls, but it will never play and will not leave any error in the console.

  



  Here's a Mediainfo export of such reluctant file :

  



  Format                                   : MPEG-4
Format profile                           : Base Media
Codec ID                                 : isom (isom/iso2/avc1/mp41)
File size                                : 1.04 GiB
Duration                                 : 1 h 21 min
Overall bit rate                         : 1 832 kb/s
Writing application                      : Lavf57.56.101

Video
ID                                       : 1
Format                                   : AVC
Format/Info                              : Advanced Video Codec
Format profile                           : High@L4
Format settings                          : CABAC / 4 Ref Frames
Format settings, CABAC                   : Yes
Format settings, Reference frames        : 4 frames
Codec ID                                 : avc1
Codec ID/Info                            : Advanced Video Coding
Duration                                 : 1 h 21 min
Bit rate                                 : 1 634 kb/s
Width                                    : 1 912 pixels
Height                                   : 1 032 pixels
Display aspect ratio                     : 1.85:1
Frame rate mode                          : Constant
Frame rate                               : 24.000 FPS
Color space                              : YUV
Chroma subsampling                       : 4:2:0
Bit depth                                : 8 bits
Scan type                                : Progressive
Bits/(Pixel*Frame)                       : 0.035
Stream size                              : 953 MiB (89%)
Writing library                          : x264 core 148 r2748 97eaef2
Encoding settings                        : cabac=1 / ref=3 / deblock=1:0:0 / analyse=0x3:0x113 / me=hex / subme=7 / psy=1 / psy_rd=1.00:0.00 / mixed_ref=1 / me_range=16 / chroma_me=1 / trellis=1 / 8x8dct=1 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=-2 / threads=9 / lookahead_threads=1 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=3 / b_pyramid=2 / b_adapt=1 / b_bias=0 / direct=1 / weightb=1 / open_gop=0 / weightp=2 / keyint=250 / keyint_min=24 / scenecut=40 / intra_refresh=0 / rc_lookahead=40 / rc=crf / mbtree=1 / crf=24.0 / qcomp=0.60 / qpmin=0 / qpmax=69 / qpstep=4 / vbv_maxrate=8000 / vbv_bufsize=1000 / crf_max=0.0 / nal_hrd=none / filler=0 / ip_ratio=1.40 / aq=1:1.00
Language                                 : French
Menus                                    : 3
Codec configuration box                  : avcC

Audio
ID                                       : 2
Format                                   : AAC LC
Format/Info                              : Advanced Audio Codec Low Complexity
Codec ID                                 : mp4a-40-2
Duration                                 : 1 h 21 min
Bit rate mode                            : Constant
Bit rate                                 : 192 kb/s
Channel(s)                               : 6 channels
Channel layout                           : C L R Ls Rs LFE
Sampling rate                            : 48.0 kHz
Frame rate                               : 46.875 FPS (1024 SPF)
Compression mode                         : Lossy
Stream size                              : 112 MiB (11%)
Language                                 : French
Default                                  : Yes
Alternate group                          : 1
Menus                                    : 3

Menu #1
ID                                       : 3
Codec ID                                 : text
Duration                                 : 1 h 21 min
Language                                 : English
Bit rate mode                            : CBR
Menu For                                 : 1,2
00:00:00.000                             : Chapitre 01
00:08:39.000                             : Chapitre 02
00:15:10.000                             : Chapitre 03
00:24:47.000                             : Chapitre 04
00:33:39.000                             : Chapitre 05
00:43:38.000                             : Chapitre 06
00:50:51.000                             : Chapitre 07
00:59:13.000                             : Chapitre 08
01:08:01.000                             : Chapitre 09
01:14:06.000                             : Chapitre 10
Bit rate mode                            : Constant

Menu #2
00:00:00.000                             : Chapitre 01
00:08:39.000                             : Chapitre 02
00:15:10.000                             : Chapitre 03
00:24:47.000                             : Chapitre 04
00:33:39.000                             : Chapitre 05
00:43:38.000                             : Chapitre 06
00:50:51.000                             : Chapitre 07
00:59:13.000                             : Chapitre 08
01:08:01.000                             : Chapitre 09
01:14:06.000                             : Chapitre 10


  



  Thanks in advance for any valuable tip you could provide

  


• How to merge video and camera recording together in browser (Chrome especially) ?

  5 juillet 2021, par lzl124631x

  Goal

  


  I want to record/generate a video in browser (Chrome especially) with a custom video (e.g. .mp4, .webm) and camera recording side-by-side.

  


  --------------------------------------------------
|                        |                       |
|  Some Custom Video     |       My Camera       |
|                        |                       |
--------------------------------------------------


  


  What is working

  


  I can use MediaRecorder to record my camera, and play the recording side-by-side with my video, and download the recorded video as a webm.

  


  Challenge

  


  I'm facing difficulty merging the video and camera recording into a single video file side-by-side.

  


  My investigation

  


  MultiStreamMixer

  


  I first looked into MultiStreamMixer and built a demo with it (See codepen).

  


  

  


  The issue with it is that it stretches the video content to fit them in the same size. I can specify different width/height for those two streams but it doesn't work as expected. My camera got cropped.

  


  

  


  Custom Mixer

  


  I took a look at the source code of MultiStreamMixer and found the issue was because of its simple layout logic. So I took its source code as a reference and build my custom mixer. See codepen.

  


  The way it works :

  


  

  • We first render the streams one by one to an offscreen canvas.

  


  • Capture the stream from the canvas as the output video stream

  


  • Audio stream is generated separately using AudioContext, createMediaStreamSource, createMediaStreamDestination etc.

  


  • Merge the audio and video streams and output as a single stream.

  


  • Use MediaRecorder to record the mixed stream.

  


  


  It adds black margins to video/camera and won't stretch the videos.

  


  

  


  However, I found the recording is very blurry if you wave your hand in front of your camera while recording.

  


  

  


  Initially I thought it was because I didn't set some setting correctly to the canvas. But later I found that even the my MultiStreamMixer demo or the WebRTC demo (You can't see the text on the teapot clearly in the recording) generates blurry video with canvas.

  


  I'm asking in webrtc group to see if I can get around this issue. Meanwhile I looked into ffmpeg.js

  


  ffmpeg.js

  


  I think this would "work" but the file is too large. It's impratical to let the customer wait for this 23MB JS file to be downloaded.

  


  Other ways that I haven't tried

  


  The above are my investigations thus far.

  


  Another idea is to play the video and recorded video side-by-side and use screen recording API to record the merged version. (Example). But this would require the customer to wait for the same amount of time as the initial recording to get the screen/tab recorded.

  


  Uploading the video to server and doing the work in server would be my last resort.

  


• hls.js starting a beginning with ANDROID mobile (chrome, webview also) and not live *** but works very nice in deskto, ios .. hls.js 1.0.0 2021-04-01

  27 avril 2021, par Jintor

  I'm streaming a .m3u8 with the latest hls.js 1.0.0 (not rc) but version of 2021-04-01...

  


  example : the stream began at 5pm, and now it's 5:15 pm...

  


  the stream start at live point in almost all browsers

  


  The pattern I see here : ALL browsers in android (tested in Android 10) won't start at live point, only at 0...

  


  I did all the tests

  


  • Safari desktop => stream live at 5:15

  


  • Safari mobile => stream live at 5:15

  


  • WebView (Android) => ••• ISSUE : the player starts the stream at 0 (5pm)

  


  • WKWebView (apple IOS iphone,ipad) => stream live at 5:15

  


  • Chrome Desktop (mac/win) => stream live at 5:15

  


  • Chrome MOBILE (Android) => ••• ISSUE : the player starts the stream at 0 (5pm)

  


  • Chrome MOBILE (iPhone) => stream live at 5:15

  


  • Microsoft EDGE Desktop => stream live at 5:15

  


  • Microsoft EDGE mobile (android) => ••• ISSUE : the player starts the stream at 0 (5pm)

  


  • Firefox Desktop (mac/win) => stream live at 5:15

  


  • Opera Desktop (mac/win) => stream live at 5:15

  


  • Opera Mini (iPhone) => stream live at 5:15

  


  • Opera Mini (android) => ••• ISSUE : the player starts the stream at 0 (5pm)

  


  • Brave Desktop (mac/win) => stream live at 5:15

  


  • Brave Mobile (iPhone) => stream live at 5:15

  


  • Brave Mobile (android) => ••• ISSUE : the player starts the stream at 0 (5pm)

  


  This code

  


  <code class="echappe-js">&lt;script src=&quot;https://cdn.jsdelivr.net/npm/hls.js@latest&quot;&gt;&lt;/script&gt;&#xA;    
  &#xA;    &lt;script&gt;&amp;#xA;      var video = document.getElementById(&quot;video&quot;);&amp;#xA;      var videoSrc = &quot;https://www.example1.com/streaming/index.m3u8&quot;;&amp;#xA;      if (video.canPlayType(&quot;application/vnd.apple.mpegurl&quot;)) {&amp;#xA;        video.src = videoSrc;&amp;#xA;      } else if (Hls.isSupported()) {&amp;#xA;         var config = {&amp;#xA;            autoStartLoad: true,&amp;#xA;            startPosition: -1,&amp;#xA;            debug: false,&amp;#xA;            capLevelOnFPSDrop: false,&amp;#xA;            capLevelToPlayerSize: false,&amp;#xA;            defaultAudioCodec: undefined,&amp;#xA;            initialLiveManifestSize: 1,&amp;#xA;            maxBufferLength: 30,&amp;#xA;            maxMaxBufferLength: 500,&amp;#xA;            backBufferLength: Infinity,&amp;#xA;            maxBufferSize: 60 * 1000 * 1000,&amp;#xA;            maxBufferHole: 0.5,&amp;#xA;            highBufferWatchdogPeriod: 2,&amp;#xA;            nudgeOffset: 0.1,&amp;#xA;            nudgeMaxRetry: 3,&amp;#xA;            maxFragLookUpTolerance: 0.25,&amp;#xA;            liveSyncDurationCount: 3,&amp;#xA;            liveMaxLatencyDurationCount: Infinity,&amp;#xA;            liveDurationInfinity: false,&amp;#xA;            enableWorker: true,&amp;#xA;            enableSoftwareAES: true,&amp;#xA;            manifestLoadingTimeOut: 10000,&amp;#xA;            manifestLoadingMaxRetry: 1,&amp;#xA;            manifestLoadingRetryDelay: 1000,&amp;#xA;            manifestLoadingMaxRetryTimeout: 64000,&amp;#xA;            startLevel: undefined,&amp;#xA;            levelLoadingTimeOut: 10000,&amp;#xA;            levelLoadingMaxRetry: 4,&amp;#xA;            levelLoadingRetryDelay: 1000,&amp;#xA;            levelLoadingMaxRetryTimeout: 64000,&amp;#xA;            fragLoadingTimeOut: 20000,&amp;#xA;            fragLoadingMaxRetry: 6,&amp;#xA;            fragLoadingRetryDelay: 1000,&amp;#xA;            fragLoadingMaxRetryTimeout: 64000,&amp;#xA;            startFragPrefetch: false,&amp;#xA;            testBandwidth: true,&amp;#xA;            progressive: false,&amp;#xA;            lowLatencyMode: true,&amp;#xA;            fpsDroppedMonitoringPeriod: 5000,&amp;#xA;            fpsDroppedMonitoringThreshold: 0.2,&amp;#xA;            appendErrorMaxRetry: 3,&amp;#xA;            enableWebVTT: true,&amp;#xA;            enableIMSC1: true,&amp;#xA;            enableCEA708Captions: true,&amp;#xA;            stretchShortVideoTrack: false,&amp;#xA;            maxAudioFramesDrift: 1,&amp;#xA;            forceKeyFrameOnDiscontinuity: true,&amp;#xA;            abrEwmaFastLive: 3.0,&amp;#xA;            abrEwmaSlowLive: 9.0,&amp;#xA;            abrEwmaFastVoD: 3.0,&amp;#xA;            abrEwmaSlowVoD: 9.0,&amp;#xA;            abrEwmaDefaultEstimate: 500000,&amp;#xA;            abrBandWidthFactor: 0.95,&amp;#xA;            abrBandWidthUpFactor: 0.7,&amp;#xA;            abrMaxWithRealBitrate: false,&amp;#xA;            maxStarvationDelay: 4,&amp;#xA;            maxLoadingDelay: 4,&amp;#xA;            minAutoBitrate: 0,&amp;#xA;            emeEnabled: false&amp;#xA;        };&amp;#xA;        var hls = new Hls(config);&amp;#xA;        hls.loadSource(videoSrc);&amp;#xA;        hls.attachMedia(video);&amp;#xA;      }   &amp;#xA;      video.addEventListener(&quot;loadedmetadata&quot;, function(){ video.muted = true; video.play(); }, false);&amp;#xA;    &lt;/script&gt;&#xA;
  

  


  // here I added video.muted = true ; video.play() ; to auto start, if I try to autoplay unmuted, many browsers refuse this command...

  


  // playsinline="true" is NEEDED for safari

  


  ••••••• THE FFMPEG COMMAND (working : it allows me to have 3 to 4 seconds delay ••••••

  


  ffmpeg -re -i input.x -c:a aac -c:v libx264 
-movflags +dash -preset ultrafast 
-crf 28 -refs 4 -qmin 4 -pix_fmt yuv420p 
-tune zerolatency -c:a aac -ac 2 -profile:v main 
-flags -global_header -bufsize 969k 
-hls_time 1 -hls_list_size 0 -g 30 
-start_number 0 -streaming 1 -hls_playlist 1 
-lhls 1 -hls_playlist_type event -f hls path_to_index.m3u8


  


  •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••

  


  How can this be fixed ?

  


  How can I make play at live point on load in android MOBILE ?