How to play audio and video files in visualforce page? The videos are stored as static resources.

<video width="75%" controls="controls">
      <source src="{!URLFOR($Resource.Video)}" type="video/mp4" />        
      Your browser does not support the video tag.

Something like this should work. I have not tested it out but in general should work. Most HTML tags would work in VF page and so the only thing that we need to do is see how we reference the static resource.

  • 1
    Yes. This. You can also add an HTML 4.01 object element inside the video element for backwards compatibility. – Charles Koppelman Oct 12 '15 at 18:21
  • 2
    @CharlesKoppelman There's no supported browser for salesforce.com that needs the object tag, though. It's time to stop cluttering up code with backwards compatibility. See browser compatibility for details. – sfdcfox Oct 12 '15 at 20:54

According to the documentation on <apex:flash>, you can use the 'src' attribute to specify a path to the movie to be displayed, expressed as a URL. Alternatively, you can store a Flash movie as a static resource and specify the 'src' attribute to the resource path as follows:

<apex:flash src="{!$Resource.<name of resource>}" height="200" width="600"  id="myFlashMoive"/> 

Currently however, there is a size limit on static resources of 5MB, so what can you do instead of static resources?

To display a .swf file via Documents, you must first take some necessary steps in your org setup to ensure the .swf file plays correctly on page load.

In Salesforce, the HTTP header of a servlet.FileDownload's response contains Content-Disposition:attachment', however as of Flash version 10.0.2, if Adobe's Flash player sees a "Content-Disposition: attachment" header while downloading a .swf file, it will ignore the .swf file rather than play it. To avoid this issue, you can reconfigure the download settings for .swf files (Setup | Security | File Upload and Download Security) from 'Download' to 'Hybrid'.

If you then upload the .swf file to Documents and implement the following Visualforce page, you can successfully use .swf files stored in Documents via the Visualforce tag , allowing for .swf files greater than 5MB in size:

<apex:page > 
   <apex:flash src="/servlet/servlet.FileDownload?file=<DocumentId>" height="300" width="100%" /> 

Link to the above doc: https://help.salesforce.com/apex/HTViewSolution?id=000212155&language=en_US

  • Thanks.The video tag works in Chrome and in IE9 and above. – richa jain Oct 14 '15 at 16:55

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.