I'm struggling with this: HTML5 video tag is not working on iPhone (Safari).

This is my code:

<video class="video" controls="" loop="" muted="" playsinline="" preload="auto">
   <source src="${pdict.video_url}" type="video/mp4">

Has anyone faced this problem before in SFCC?

  • mp4 is the container format for the video, but arguably the more important thing to know is which codec was used to encode the video. That, and the version of Safari. Cursory searching reveals that Safari needs you to use (an implementation of) the H264 codec (Safari 3.2+) or H265 codec (Safari 11+). Things like VLC media player, FFMpeg, or Mediainfo can tell you which codec was used to make a video file.
    – Derek F
    Jun 3 '21 at 12:42

Video tag is working fine with html5 in SFCC on apple devices.

Here is the example from live site, which is loading video correctly. FYI, we have used Video.js

<video id="html5" class="vjs-tech" preload="auto" poster="https://images.example.com/is/image/H1_image?fit=constrain,1&amp;wid=664&amp;hei=664" data-setup="{}" style="max-width:100%" src="https://images.example.com/is/content/H1_1" controls="">

Hope this might help you. Thanks, A


Try replacing video tag with iframe tag

Code which I used

<apex:page >   
<video style="border:1px solid red; background-color: red; position:absolute;" controls="true" >
    <source src="{!$Resource.VideoDemo}" type="video/mp4"/>
</video>  </apex:page>


<apex:page >   
<iframe width="420" height="315" src="{!$Resource.VideoDemo}" frameborder="0"></iframe></apex:page>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.