Cooking HTML5 video in VLC and serving with jPlayer
The HTML5 video tag is already supported by all major browsers.
As the table shows , the current versions of Firefox, Chrome and Opera support the open WebM promoted by Google, and Safari (including the IOS version) and IE proprietary H.264, for other browsers you can use a flash player that can play the same H.264, and thus, for cross-browser compatibility, it will be sufficient to transcode the video into these 2 formats.
In this short note, I will tell you how to transcode video into these very formats (this question is covered on the Internet is surprisingly bad) in the VLC player and how to use jPlayer for its cross-browser playback.
')
Download and install VLC (available for most OS).
Open and click Media -> Convert / save ... where we add files to convert, then click on the Convert / save button and get the following dialog:
First select the Video - VP80 + Vorbis (Webm) profile, if you click on the tool icon, you can set the stream width for video and sound and change other settings.
After that, you can select the file name and output folder through the overview, for example test.webm, and boldly press the Start button, you can also click the Show output checkbox to observe the process.
At the output we get the desired file.
Now repeat the same operation for H.264 (mp4 extension).
To host the video, we will use jQuery plugin - jPlayer, it is better to download the archive with examples (at the moment it is relevant - www.jplayer.org/latest/jQuery.jPlayer.2.0.0.demos.zip ).
Unpack the archive and create a test.html page in its root with something like the following (the whole point is in the script tags): pastebin.com/tmVGyXd2
Also, copy the resulting test.webm and test.mp4 into this folder (if you want to also have a picture preview video - test.jpg).
Now you can download everything to a web server (in the example the folder is called / jplayer /) and try the result in different browsers.
Be sure to include the content types for the web server (for example, in .htaccess for Apache):
www.mirovideoconverter.com is a very simple and easy to use converter (although perhaps even too simple), based on ffmpeg.
www.xmedia-recode.de - free proprietary for Win, many settings, very good.
ffmpeg.org (builds for Win hawkeye.arrozcru.org ) - I think it is not necessary to submit, an example of use:
PS If there are any more convenient ways to convert - write, because this one is not without flaws.
As the table shows , the current versions of Firefox, Chrome and Opera support the open WebM promoted by Google, and Safari (including the IOS version) and IE proprietary H.264, for other browsers you can use a flash player that can play the same H.264, and thus, for cross-browser compatibility, it will be sufficient to transcode the video into these 2 formats.In this short note, I will tell you how to transcode video into these very formats (this question is covered on the Internet is surprisingly bad) in the VLC player and how to use jPlayer for its cross-browser playback.
')
Cooking video
Download and install VLC (available for most OS).Open and click Media -> Convert / save ... where we add files to convert, then click on the Convert / save button and get the following dialog:
First select the Video - VP80 + Vorbis (Webm) profile, if you click on the tool icon, you can set the stream width for video and sound and change other settings.
After that, you can select the file name and output folder through the overview, for example test.webm, and boldly press the Start button, you can also click the Show output checkbox to observe the process.
At the output we get the desired file.
Now repeat the same operation for H.264 (mp4 extension).
We place the video on the page
To host the video, we will use jQuery plugin - jPlayer, it is better to download the archive with examples (at the moment it is relevant - www.jplayer.org/latest/jQuery.jPlayer.2.0.0.demos.zip ).Unpack the archive and create a test.html page in its root with something like the following (the whole point is in the script tags): pastebin.com/tmVGyXd2
Also, copy the resulting test.webm and test.mp4 into this folder (if you want to also have a picture preview video - test.jpg).
Now you can download everything to a web server (in the example the folder is called / jplayer /) and try the result in different browsers.
Be sure to include the content types for the web server (for example, in .htaccess for Apache):
AddType video/mp4 .mp4
AddType video/webm .webm
UPD: more tools for transcoding video
www.mirovideoconverter.com is a very simple and easy to use converter (although perhaps even too simple), based on ffmpeg.
www.xmedia-recode.de - free proprietary for Win, many settings, very good.
ffmpeg.org (builds for Win hawkeye.arrozcru.org ) - I think it is not necessary to submit, an example of use:
ffmpeg -i input.avi -acodec libvorbis -ac 2 -ab 96k -ar 44100 -b 345k test.webm
ffmpeg -i input.avi -acodec aac -strict experimental -ac 2 -ab 96k -vcodec libx264 -vpre slow -b 345k -f mp4 test.mp4PS If there are any more convenient ways to convert - write, because this one is not without flaws.
Source: https://habr.com/ru/post/118028/
All Articles