lookichecks.blogg.se - Wordpress videojs resolution switcher master

#Wordpress videojs resolution switcher master install
#Wordpress videojs resolution switcher master code

hls_playlist_type vod -b:v 5000k -maxrate 5350k \ crf 20 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 \ vf scale=w=1920:h=1080:force_original_aspect_ratio=decrease \ crf 20 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls_playlist_type vod -b:v 2800k -maxrate 2996k \ vf scale=w=1280:h=720:force_original_aspect_ratio=decrease \ crf 20 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls_playlist_type vod -b:v 1400k -maxrate 1498k \ vf scale=w=842:h=480:force_original_aspect_ratio=decrease \ crf 20 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls_playlist_type vod -b:v 800k -maxrate 856k \ This command will create 4 versions of the video along with a playlist for each: We can create multiple renditions and let the player decide what’s the best one to play at any given time of the playback. You will definitely want more than one to acommoadte both your low-end, low-bandwidth users as well as those who are watching in the latest 4k iMac on fiber connections. HLS Creation: Multiple Renditions And Master PlaylistĪll the work we did in the previous section was for one rendition.

The playlist for the video looks like this: #EXTM3U In this case, it produced 34 segments for the video I chose One or more transport stream segments with a.

#Wordpress videojs resolution switcher master code

Running the code above will produce a set of files:

serenity/360p.m3u8 – path of the playlist file – also tells ffmpeg to output HLS (.m3u8).

-hls_segment_filename beach/360p_%03d.ts – explicitly define segments files’ names.

-hls_playlist_type vod – adds the #EXT-X-PLAYLIST-TYPE:VOD tag and keeps all segments in the playlist.

-hls_time 4 – segment target duration in seconds – the actual length is constrained by key frames.

-b:v 800k -maxrate 856k -bufsize 1200k – limit video bitrate, these are rendition specific and depends on your content type.

-sc_threshold 0 – don’t create key frames on scene change – only according to -g.

-g 48 -keyint_min 48 – create key frame (I-frame) every 48 frames (~2 seconds) – will later affect correct slicing of segments and alignment of renditions.

-crf 20 – Constant Rate Factor, high level factor for overall quality.

-profile:v main – set H264 profile to main – this means support in modern devices.

-c:v h264 – set video codec to be H264 which is the standard codec of HLS segments.

-c:a aac -ar 48000 -b:a 96k – set audio codec to AAC with sampling of 48kHz and bitrate of 128k.

-vf "scale=w=1280:h=720:force_original_aspect_ratio=decrease" – scale video to maximum possible within 1280×720 while preserving aspect ratio.

-i serenity.mp4 – set serenity.mkv as input file.

The explanation for each of the parameters in the example are described in the following list: hls_segment_filename serenity/360p_%03d.ts \ vf scale=w=640:h=360:force_original_aspect_ratio=decrease \

# Create the directory to store the files

HLS works with Transport Stream segments and has much tighter control over the characteristics of the streams (or renditions in HLS parlance).Įncoding a single rendition of your video looks like this for an H264 product. It provides a lot of tools and supports the creation of the necessary files out of the box. We will use FFMPEG command line tool to create the HLS video. HLS works differently than DASH with different formats and parameters. I’m also banking on the fact that H264 has better support in both Apple and non-Apple devices. The technologies to implement HEVC in HLS is significantly different than what we discuss here so I’ll probably do a separate post on it rather than confuse matters. player.At WWDC 2017, Apple announced support for HEVC (H265), letting you work with both types of streams in the same playlist. This behavior can be changed if customSourcePicker is passed.ĬustomSourcePicker must return player object. If there is more than one source with the same label, player will choose source automatically. Player.currentResolution('SD') // returns videojs player object Add dynamically sources via updateSrc method

#Wordpress videojs resolution switcher master install

Or bower bower install videojs-resolution-switcher Working examples of the plugin you can check out if you're having trouble. Resolution switcher for video.js v5 Example