Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 16, 2022 at 11:48 am #1340896
    marcusss

    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 #1341027
    Ismael

    Hey 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,
    Ismael

    February 17, 2022 at 10:10 am #1341083
    marcusss

    Hi 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 #1341268
    Ismael

    Hi,

    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

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.