I am currently using two different approaches to do this. The first option is to use an HTML Widget and the second is to use a reference video file.
Enter the following code snippet into the HTML widget…
<video width="100%" height="100%" poster="http://ituned.walker4.me/img/GG2.jpg" controls="">
<source src="http://movietrailers.apple.com/movies/marvel/guardians-of-the-galaxy-vol-2/guardians-of-the-galaxy-vol-2-trailer-2_h720p.mov" type="video/mp4">
Your browser does not support the video tag.
In the above case, “video” and “/video” entries initiate and terminate an HTML5 video code segment. The “width=” and “Height=” code elements set video display scaling as a percentage within the browser’s current total display window allocation. The “img=” code segment points to an image to be used as the video player’s “poster” frame. (In this case, I used a project image already stored as a project asset. Normally relative addressing would be used here but I used absolute addressing to maintain external functionality. NOTE: for best results, poster image should have the same dimensions/aspect ratio as the sourced video file display.) The “controls=” code segment tells the browser to display the default video controls. The “src=” code segment points to the absolute URL of an external video URL or the relative URL of a video file stored locally on your website. (In this example it points to the external URL for an Apple movie trailer.) The “type=” code segment tells the browser that the MOV file contains MPEG-4 audio/video data. And the last text line included in the code is an error trap indicating the browser does not support HTML5 video playback.
In this example, I made a reference video pointing to a video file already stored on a server as depicted below…
In this case the reference file is only 185 bytes but points to more than 100 MBs of audio and video data on the Internet. If you then change the MOV extension to MP4, the file can then be imported and used like any “small” standalone MP4 video asset in the Blocs app.