Tagged: HTML5 Video, mp4, video fallback
-
AuthorPosts
-
February 16, 2022 at 11:48 am #1340896
Hi,
I searched the forum but could not find a clear answer. I have made 2 identical video files, video.mp4 and video.webm
As I understood from docs on the www, HTML5 video tag would create a fallback for browsers.But in my code I only see 1 format, the MP4 file I selected as video file in the AVIA builder video element.
<div class='avia-video av-kzoc2ncu-00cbe6c3e89260fa38dafdc246397021 avia-video-16-9 av-html5-fullscreen-btn av-preview-image avia-video-load-always avia-video-html5' itemprop="video" itemtype="https://schema.org/VideoObject" data-original_url='https://domain.com/wp-content/uploads/2022/02/video.mp4'><video class='avia_video' poster="https://domain.com/wp-content/uploads/2022/02/video-player-thumb.png.webp" preload="auto" muted controls id='player_100_686455250_880700812'><source src='https://domain.com/wp-content/uploads/2022/02/video.mp4' type='video/mp4' /></video></div>
So my question is, what is the correct way to insert a video , enabling the fallback option. Should I select the WebM file, or the MP4 file.
Or is there another way to do this so my code will also refer to the video.webm file as fallback ?For example like this I found on a HTML5 video tag document
<video controls width="250"> <source src="/media/cc0-videos/flower.webm" type="video/webm"> <source src="/media/cc0-videos/flower.mp4" type="video/mp4"> Sorry, your browser doesn't support embedded videos. </video>
Thanks
February 17, 2022 at 4:25 am #1341027Hey marcusss,
Thank you for the inquiry.
By default, the Video element will only use the selected video. Unfortunately, you cannot define a fallback. But since MP4 (H.264) is widely supported by most browsers, you don’t really need to use other formats as fallback.
// https://en.wikipedia.org/wiki/HTML5_video > Browser support
Best regards,
IsmaelFebruary 17, 2022 at 10:10 am #1341083Hi Ismael,
Thanks for the reply. I do understand MP4 is widely supported. But WebM is much more efficient encoded and thus smaller. I think the current way to go should be to use WebM with MP4 as fallback,
When I open the Video element in Avia builder I see this next top the video select field >
Note with self-hosted HTML5 videos: Different browsers support different file types (mp4, ogv, webm). If you embed a video example.mp4, the video player will automatically check if a video example.ogv and example.webm is available and display these versions in case it is possible and necessary
So this implies that the expected fallback should be somehow implemented right ?
Thanks
February 18, 2022 at 5:44 am #1341268Hi,
Thank you for the update.
So this implies that the expected fallback should be somehow implemented right ?
Yes, you are correct. But it looks like the option is not yet available and upon reviewing the code, the video doesn’t actually look for fallbacks or I just missed something. We will forward this issue to our channel.
For the meantime, please try to edit the enfold/framework/php/function-set-avia-frontend.php file and look for this code around line 898.
$html5_files = $video;
We will add a filter by replacing the code with:
$html5_files = apply_filters( "avia_html5_video_files", $video );
You can then use this code in the functions.php file to manually define fallbacks for a specific video.
add_filter("avia_html5_video_files", function($videos) { if ( ! strpos($videos["web"], "world-video.web") === false) { $videos["mp4"] = "https://site.com/wp-content/uploads/world-video.mp4"; $videos["ogv"] = "https://site.com/wp-content/uploads/world-video.ogv"; } return $videos; }, 10, 1);
This checks if the name of the video is “world-video.webm”, then assign fallbacks for mp4 or ogv.
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.