Example [1] uses the standard Xara Video Widget and the optional attribute “autoplay” - the code for this widget is viewed by clicking on the widget > edit > HTML code (Body). Where the video has an audio track, most browsers will not autoplay without the attributes of “muted and “playsinline”. Xara’s widget does not require either muted or playsinline to work, but to ensure it works correctly in all browsers, the widget should be edited to include the two additional attributes. “playsinline is required for iOS where autoplay and muted are used. <video class="xar_meplayer" src="index_htm_files/Waterfall.mp4" autoplay muted playsinline controls width = "100%" height="100%"/> Example [2] has a ‘poster’ added - this is an image that covers the video; it can compensate for what might otherwise appear to show a video slowly loading. It also provides an opportunity to give the video a ‘cover’ - though this serves no purpose where a video is set to ‘autoplay’. This cover poster should be exported to the same local directory as your index files, or exported to any source “src” of your choice and retrieved from that location. <video class="xar_meplayer" src="index_htm_files/Waterfall.mp4" poster="index_htm_files/video_poster.png" autoplay muted playsinline controls width = "100%" height="100%"/> The poster should be an image with the same height and width as the video. The poster can be used as a video cover as an alternative to the video starting automatically by editing the widget to exclude autoplay and mute <video class="xar_meplayer" src="index_htm_files/Waterfall.mp4" poster="index_htm_files/video_poster.png" playsinline controls width = "100%" height="100%"/> Where a designer has used the Xara widget, but wants to revert to using a standard video tag, this can be changed to a standard video tag by deleting class=”xar_meplayer” from the widget code: When this is done a visitor will see the browser’s own video controls. <video src="index_htm_files/Waterfall.mp4" poster="index_htm_files/video_poster.png" playsinline controls width = "100%" height="100%"/> The alternative to using the Xara video widget is to use a standard video tag - explained here > https://initiostar.co.uk/demo/simpleVideo/

Xara Video Widget

1
2
Video Title