Streaming Videos - Desktop V Mobile Devices (Strange phenomenon!!)

[Diarm87]

OK. I'm going to explain this as best I can.

Since I've been using Captivate, videos have been my Achilles heal. In particular in relation to getting them to work on mobile devices.

To make a long story short I have tried the following:

1. Upload MP4 videos straight to Captivate

          - Doesn't work on mobile devices.

2. Upload the videos to Vimeo/youtube and embed them into Captivate:

          - Works perfectly, but I don't like doing it that way.

3. Upload the files to Filezilla, embed the url into Captivate as a "Web" object:

          - Works perfectly, apart from.......

My Problem

The Background:

• I have 6 videos embedded on one slide.
• They are different states of a single object.
• When I click a button, it changes the state of the object to a video, and that video plays.

The Problem: The "Auto Load" option for the "Web" object seems to react differently when using a Desktop compared to when you use a Mobile Device.

On a desktop:

• If I select "Auto Load", as soon as I enter the slide, all the videos play at once, without clicking any buttons, which is obviously not what I want.
• If I DON'T select "Auto Load" it works fine, and as soon as I click the appropriate button I then click the Play icon and it plays the video.

On a mobile device:

• If I select "Auto Load" it works perfectly, and as soon as I click the appropriate button the video plays perfectly.
• If I DON'T select "Auto Load" the videos appear but simply do not play at all (which is obviously not what I want!!).

So essentially, what I want is to be able to select "Auto Load" but for the videos not to play automatically when I enter the slide.

So any suggests would be much appreciated. I can send on a URL showing an example of the problem, but I'd prefer to do it privately, so let me know.

Thanks in advance.

Diarmuid

[StevePixel]

Hi Diarmuid, 

Couple of questions first. 

What type of device are your targeting? Android and Apple handle video differently for mobile.

When you say you are uploading to Filezilla. Where exactly does it go?  A media server on the web? (my understanding is Filezilla is an ftp client, not a media server)  

If you are streaming video from a media server then that server generally determines how it handles playback so I need to know where they are being stored. 

Cheers, 
Steve 

[Diarm87]

Thanks for the response.

Ya I meant to say FTP client.

I am targeting Android and Apple devices. I have an iPad and an android tablet to test the projects on and the problem is common to both. The videos themselves work perfectly individually, just not when they're within Captivate.

I whipped up a simple example of what I'm talking about. I created a responsive Captivate project with 2 identical slides.

In the first slide the Autoload is on and both videos play simultaneously when you open them on the desktop, but work perfectly when you open on a tablet.

The second slide the Autoload is OFF and it works perfectly on the desktop but doesnt work at all on the tablet.

http://tacitlearning.ie/AutoloadDemo/index.html

Let me know what you think.

[StevePixel]

Hi Diarm87,

This is really helpful, but I still need to know are you hosting the videos on a media server on the web for example Vimeo?   You ftp them somewhere, but to what type of server (web or media). This may also explain why the desktop works and the tablet doesn't. If they are progressively loading your desktop may have faster internet access while your  tablet is slower. The videos won't play until they are fully loaded, unless its on a media server then they would play immediately.

If you want the same functionality as you have from YouTube then you probably will need to use a media server and control how they are auto-play or not from that service, not from within Captivate. take a look at Vimeo, basic is free.

Captivate is auto-playing all the videos as its reading them starting at the same time on the timeline. Not sure there is anyway around this, unless start and stop functionality is controlled externally. 

Also as FYI, apple phones and android phones handle video totally differently so if you need that functionality it may be a total showstopper. If you do need iPhone functionality I would definately test that sooner, rather than later.

Cheers,
Steve

[Diarm87]

StevePixel

This is really helpful, but I still need to know are you hosting the videos on a media server on the web for example Vimeo?   You ftp them somewhere, but to what type of server (web or media).

So basically I only introduced myself to Filezilla in the last week or two so I'm not 100% sure of the terminology. But basically what I did is uploaded the MP4 to the Filezilla server, copied the URL from that and copied that URL into the "web" object in Captivate.

I tried Vimeo before and it worked perfectly across all devices. The only problem is I don't like the fact that when a user watches one of the videos on Captivate, they can then access my Vimeo account and have access to all my other videos.

That's why doing it using Filezilla seemed to be perfect solution until I encountered this problem.

I agree with you that it seems to be a problem with the server rather than with Captivate.

For example if I take the basic URL of the hedgehog video: http://tacitlearning.ie/AutoloadDemo/Me%20and%20my%20Hedgehog.mp4

When I go to this URL on the desktop it plays automatically.

However when I go to the URL on a tablet it requires me to press play before it plays.

This essentially is my problem. 

Is there anything I can do on Filezilla that can change that, or alternatively is there any other media servers that you could suggest which would be suitable for my needs?

[StevePixel]

Hi Diarm,

The "press play" issue may be a part of the device OS, for example iPhones require you to press play, and load in a completely separate window and that will be consistent regardless of where its housed. There is a way to create a custom graphic thumbnail and replace the video arrow, but they will still need to press it.

Not sure if this solves your Vimeo issue, but if you have a paid account, you can control the "end screen". For my videos I just have it return to the original thumbnail.

Cheers,

Steve

[Lilybiri]

Just to add a tip to Steve's great answers. I always add a poster image to HTML5 published output to avoid the blank screens. Even when Autoplay is active, the course will not play automatically on mobile devices, due to the limitation by iOS (who seems always to get special treatment, although here in Europe Android devices are much more spread). You add a poster image here:

If you have a look at this blog post, you'll see that I embedded the same interactive slide twice:

Captivate's Timeline(s) Demystified - Intro - Captivate blog

First one is a SWF, the second one is HTML5 and I used a Poster image which has also another arrow image (I made the original arrow start button invisible, but it keeps its interactivity).

[Diarm87]

Thanks Lily and Steve for all the suggestions.

Unfortunately nothing seems to be working for me. It's very frustrating. I don't understand how one feature (in this case Autoload) can result in one thing for Desktops and the complete opposite thing for tablets and mobile devices.

I don't think there's anything within Captivate that I can do to solve this problem.

I can't see anything I can do with Filezilla either. Does anyone know of any other way I can stream videos, similar to Filezilla, and be able to embed that video into Captivate?

[StevePixel]

Hi Diarm,

I can suggest two, Vimeo.com or YouTube.

Cheers,
Steve

[Erik_Lord]

I'm curious about your first issue. If the videos are large, then putting them on a streaming service like Vimeo is probably best.

If they're fairly small, then embedding them in the project should work - as long as they are MP4 with the h.264 codec.

Are you SURE they are?

When you say they don't work on mobile...what do you mean?

Is it worth creating a new simple project with one embedded video and testing that alone?

No reason a proper MP4 shouldn't play back on all mobile devices...

[Diarm87]

Hi Erik,

Since I started with Captivate I've been trying to upload videos directly to the project but it's never worked out for me.

I create all my videos from scratch, in MP4 and with the h.264 codec, then I insert it into the Captivate Project.

Take for example one project. It had 2 slides. Slide 1 had just a video in it. Slide 2 had several smart objects. One of the objects had six videos in it as different states (i.e. when you changed states it changed to a different video.)

What I find is when I publish the project and try it out on the desktop there's rarely an issue, everything works fine. But when I try it on a tablet the first video on the first slide usually works fine. But when I try and play the videos on the second slide they never work.

For that reason I've had to resort to streaming them.

Added to that, when I stream and embed them the overall size of the published project is significantly smaller, meaning it's a bit easier to work with.

I would love to be able to upload the MP4s directly as it would solve all my problems, but my experience so far is suggesting it's not practical.