Can't get .WEBM videos to autoplay / loop in Harlowe

Question

Hi,

I'm using Harlowe 2.1.0;

I'm trying to get my story to use looping .webms, but can't seem to figure out how to display them.

When I do this:

<video preload="preload"  id="video" autoplay="autoplay" loop="loop">
<source src="example.webm" type="video/webm"></source>
</video>

I get the first frame of the .webm, but it doesn't play (in Chrome). In IE, it doesn't even display. What's the best way to display looping videos in Harlowe?

Thanks!

Answer 1

As explained in this article Google recently changed Chrome so that by default it will no longer autoplay video unless certain conditions are true.

Web-browsers being run on mobile devices generally don't allow autoplay of media files like audio & video, are you doing your testing on a mobile device?

I suggests you look at the video element documentation because there are also a number of issues in your example, 

1. The preload attribute needs to be assigned one of a known set of values, "preload" isn't one of them, and as explained in the documentation including a autoplay attribute automatically makes this attribute redundant.

2. The autoplay and loop attributes are Boolean in nature, so you don't need to assign then a value.

3. The source element is self ending, so there is no need for a end source tag.

4. Line-breaks within the source area of the video element should be escaped.

5. [optional] Ideally you should include a text message for those running a web-browser that doesn't support the video element.

The following is a modified version of your example which should work as you want within web-browsers that support autoplay and loop, and under the conditions that that specific web-browser requires.

<video id="video" autoplay loop>\
	<source src="media/example.webm" type="video/webm">\
	<p>Your browser doesn't support HTML5 video.</p>\
</video>

{
<video id="video" autoplay loop>
	<source src="media/example.webm" type="video/webm">
	<p>Your browser doesn't support HTML5 video.</p>
</video>
}

edit: added an example that uses Collapsing whitespace markup