Search code examples
htmlvideoffmpegyoutube-dl

Autogenerate HTML5 <video> tags from YouTube-DL


I'm using youtube-dl to download videos I've stored on YouTube. It gives me the ability to download various formats, thumbnails, and subtitles.

Is there any way I can automatically generate an HTML5 <video> snippet from the downloaded files?

For example, I'd like the end result to be .txt file containing:

<video poster="file-160.jpg" > <source src="file-135.mp4" type="video/mp4; codecs=mp4a.40.2, avc1.42001E"> <source src="file-43.webm" type="video/webm; codecs=vorbis, vp8.0"> ... <track kind="subtitles" src="file-160.en.srt"> </video>

At the moment, I have a file list like:

  • file-135.mp4
  • file-18.mp4
  • file-134.mp4
  • file-160.mp4
  • file-43.webm
  • file-5.flv
  • file-36.3gp
  • file-17.3gp
  • file-160.jpg
  • file-160.en.srt

I can run some Python/Ruby/bash over them to generate the <source src="...", but the problem is, I don't know what codecs each of those videos are, so I can't generate the ; codecs= portion.

Using avconv or ffmpeg I can get the codecs, but not in a suitable format for embedding into HTML.

I'm wary of asking "what tool should I use" - but is there any way to get avconv/ffmpeg/youtube-dl to spit out the codec information in a format I can put into an HTML5 tag?

Or, is there a way to get YouTube-DL only to spit out HTML5 compatible files with known codecs?


Solution

  • The type attribute starts with a MIME type which describes the container format. You can easily find the MIME type for all possible formats.

    Each container format can support multiple audio/video codecs. The codecs parameter of the type attribute is used to determine if the client is capable of playing the file before fetching it, but it's not mandatory. If it's not specified, the browser will download and try to decode the video.

    If you want to amuse yourself and generate the codec IDs yourself you'll have to take a look at RFC6381 and in some cases at the codec reference.

    For some container formats on YouTube like webm this is easier since it's something like video/webm;codecs="vp8, vorbis" or video/webm;codecs="vp9, opus"

    For others like the ISO-based formats it's more complicated since it can contain encoding parameters. You might be able to obtain some of these using ffmpeg by sending over RTP to generate an SDP.

    Example for an mp4 with H.264/AVC and AAC (the destination address can be anything as you won't actually send anything)

    • video: ffmpeg -i input.mp4 -c:v copy -an -f rtp rtp://...
    • audio: ffmpeg -i input.mp4 -c:a copy -vn -f rtp rtp://...
    • look for profile-level-id in each output.

    For the AVC stream the codec will be avc1.profile-level-id, for the AAC mp4a.40.profile-level-id etc.

    Also see: html5 video tag codecs attribute

    With youtube-dl you can use -F, --list-formats to get the available formats and -f, --format to download only the specific formats.