Syncing Video (Youtube, mp4, Vimeo) with text and animation

youtube

(Eden) #21

Hi friends,
Maybe someone here can tell me what I need to do to make it work on mobile.?


(Eden) #22

please help… with my question


#23

Hi Eden!

Your question is painted with quite a broad brush and no details.

Perhaps if You posted an example project of your work to date - with specific questions about the issue(s) You are having - You might elicit a better response.


(Eden) #24

Hi Jim,

I’m talking about this project - see the attached file:
interactive-youtubeAPI.hypetemplate.zip (24.1 KB)

Thanks.


(Jonathan Deutsch) #25

Unfortunately you cannot overlay html elements over video on the iPhone/iPad. You’ll want to change the element positioning so it doesn’t overlap. (Also the iPhone doesn’t by default show videos inline, though there is now an option in iOS 10 that could allow for this, but it is dependent on youtube using it in their widget).


(Eden) #26

Really bummer.
What about Android devices …?


(Jonathan Deutsch) #27

Actually I take that back - in testing it does now appear that iOS allows videos to be overlayed with other elements. (on the iphone you’d need to add a playsinline attribute; Hype will soon support this). Android also can do overlays.

In the case of your document, there’s something else going on… it isn’t even loading the youtube video properly on android or iOS. You might want to try getting that working first and then proceed to the quiz part.


#28

Hi @all The reason for video not showing or working is due to an update in the media element JS and the associated API’s

Here are some updated documents:

Demo 1

Demo 2

Files:
ProjectFiles.zip (926.6 KB)

####*froogaloop is deprecated. Vimeo now has calls built in to it’s API.


(Eden) #29

You can share the hype file…?


#30

sync-projects.zip (695.5 KB)


(Eden) #31

Thanks DBear - It’s great … but this is not interactive-youtubeAP file with questionnaire stop (:

You can make this file work on mobile.?interactive-youtubeAPI.hypetemplate.zip (24.1 KB)


#32

@eden It’s not specific to your problem no :slight_smile: but it shows how you can stop a Youtube video and with Jonathan’s comment there is hope for overlaying elements over the top of video. My files show you how to interact with youtube / vimeo video files and sync them with Hype timelines.

Unfortunately I haven’t got time to tailor a solution for you but hold out for someone to perhaps chime in and help you or wait for Hype to support the overlaying. :wink:


(Eden) #33

Okay … I get it
Thanks


(Matt) #34

Hi @DBear -
I’ve been through all of the posts in this thread carefully. I particularly want to recreate your example from the mediaSync2 example with the Vimeo API but I don’t understand a couple of things. I want to manipulate timelines as the Vimeo playtime line changes. It looks like you have this in your example but I don’t see “animation1” anywhere in the Hype project?

var iframe = $('#player2')[0];
var player = new Vimeo.Player(iframe);
var status = $('.status');
symbol = hypeDocument.getSymbolInstanceById('timeline');
fired = 0;

// When the player is ready, add listeners for pause, finish, and playProgress
status.text('ready');
    
player.on('pause', onPause)
player.on('ended', onFinish);
player.on('timeupdate', onPlayProgress);

// Call the API when a button is pressed
$('symbol').bind('click', function() {
	player.api($(this).text().toLowerCase());
});


$('button').bind('click', function() {
    player.api($(this).text().toLowerCase());
});

function onPause(id) {
    status.text('paused');
    symbol.pauseTimelineNamed("animation1");
}

function onFinish(id) {
    status.text('finished');
}

function onPlayProgress(data, id) {
    status.text(data.seconds + 'matt is great');
    
    if (data.seconds >= 10 && fired === 0) {
    	box3.style.display = "inline";
    	symbol.continueTimelineNamed("animation1");
    	fired++;
    }
    
    if (data.seconds >= 18 && fired === 1) {
    	symbol.pauseTimelineNamed("animation1");
    	fired++;
    }
}

This will be super helpful for a project I’m working on so thank you in advance!


#35

Sorry Matt, Have been away.

“animation1” is, inside a symbol.

If you want, you can share your project and I can look at implementing a solution.


(Eden) #36

Hi Folks,
There is a new …?
Someone will make it work with mobile phones?