Video autoplay mobile devices


(Martin C.) #1

Hi there !
I just started with Tumult and I’m fulfilled with all the possibilities it offers me. I succeeded to produce a video with autoplay, loop, without controls. Everything is fine, but I would like to add a sort of arrow on the picture for when it is displayed on mobile devices that don’t autoplay, to invite the viewer to clic on the picture so the video can start. A little bit like instagram. I would like to display this arrow only on mobile platforms. Is there a way to do so ?
Thank you very much !
Best
Tino


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #2

It seems that a poster image might solve the problem…

But Hype doesn’t seem to support this by default. So, instead, you can just use HTML5 code to manually place your video – with a poster image. This is tricky, as the paths to the files would likely need to point to the resources folder…


#3

Yup – you would create a shape, and then link it to a ‘play’ action on the video element.

Or, you can have the video autoplay (muted) and then create a button on the video to unmute the video. Here’s sample code that loads a video from your resources folder, a poster image from your resources folder, is set to autoplay, and is muted. It also has the playsinline property so that it is set to play automatically when loaded on mobile devices. Mobile Safari 9 and the latest Chrome on Android support this.

<video id="dragdrop" poster="${resourcesFolderName}/video-poster.png" width="458" height="" playsinline autoplay>
<source src="${resourcesFolderName}/video-dmg-drag.ogg" type="video/webm">
<source src="${resourcesFolderName}/video-dmg-drag.mp4" type="video/mp4">
</video>

The ‘playsinline’ property lets you autoplay video if it is muted. That would just require playsinline=""` above. This option is coming in the next update.

You can set the poster for a video with a Unique Element ID of myvideo by running this code On Scene Load if your poster image is called image.png and is located in your resources folder:

document.getElementById('myvideo').setAttribute('poster','${resourcesFolderName}/image.png');

There’s hundreds of options here, so it’s really up to how far you want to go.


(Martin C.) #4

Hi Daniel and thanks for the reply. I’ve tried the first option (shape with play action) but the shape is then visible on any platform and it stays…
Concerning the video tag, I’m not sure how to use it because in the html doc produced when exported in html5, there’s no video tag but a div which point to a script. Let me explain you my flow. I export a video with autoplay, loop, no controls, and an action onclick:play timeline. This gives me an html doc with hype resources files which is this one:
http://www.expo.martincoiffier.com/themoon/fromthemoonMartinCoiffier2017.html

In this html page, there’s the code: (I took off some “<” to make the code visible)

div id=“fromthemoonmartincoiffier2017_hype_container” style=“margin:auto;position:relative;width:620px;height:620px;overflow:hidden;” aria-live=“polite”>
script type=“text/javascript” charset=“utf-8” src=“fromthemoonMartinCoiffier2017.hyperesources/fromthemoonmartincoiffier2017_hype_generated_script.js?15750”>/script>

Then I embed the webpage into another website with iframe tag

iframe style=“border: none”; position=“relative” src=“http://www.expo.martincoiffier.com/themoon/fromthemoonMartinCoiffier2017.html” width=“620” height=“620” frameborder=“0” scrolling=“no” seamless></iframe

Result: http://www.martincoiffier.com/La-Lune

The reason I embed the image with iframe is because it’s the only way I found to make the video visible on some Androids.

My issue: How to make visible a “play” symbol ONLY when the video does not autoplay on some devices. Then, to make disappear the symbol onclic

I’m going to try to find solutions through all the documentations but if you have something easy for me, I would be SOOOO happy !
Have a nice day !


(Martin C.) #5

Hi Daniel,
I’m sorry but I’ve tried to understand how to use video id=“dragdrop” but I’m completely lost. How do I include this code, and where ? Do I keep “dragdrop” name ?.. I would be very thankfull if you help me with that… Because yet on ipad also the videos don’t autoplay if there are more than one video on page…
You can still see it on http://www.martincoiffier.com/La-Lune

I discovered that the platform “flixel” succeeded to autoplay on EVERY device, but I don’t know how they do… see this test I did with one video hosted on flixel, then embeded on one webpage: http://www.expo.martincoiffier.com/expo3.html
Thanks for your help
Best regards


(Martin C.) #6

Hi Daniel,
I’m very sorry to insist, is there a reason why you didn’t answered yet ? I’m still trying to find solutions and I would be very happy to read your suggestions.
Best regards


#7

Here is the code they use, which is similar to what I recommended:

        <video id="flixel-video" autoplay loop preload playsinline poster="" class="video landscape desktop">
            <source src="https://flixels.s3.amazonaws.com/flixel/ocae73y110urybkbf2pf.tablet.mp4?v=1" type="video/mp4">
        </video>

The key attributes that allow the video to autoplay are:

autoplay loop preload playsinline

Because that video does not have an audio track, they haven’t included ‘muted’ in that list.

You can insert Video code within the inner HTML of a rectangle. Select Insert > Rectangle, then click Edit > Edit Inner HTML and you can insert any HTML code you wish. You don’t need to include Dragdrop – that was just an example ‘id’.


#8

Please note that as of iOS 10 and Hype 3.6.0 you can autoplay video if it is muted by selecting the Inline (iOS) option in the Video inspector:


(Martin C.) #9

Hi Daniel, thank you for telling me, I was just working on it, and it seems it works on most platforms. I’m still on trial and crossing fingers… Cheers