Discoloring of mp4 videos in html5 output

I am using Adobe Captivate to be able to publish to html5. As swf is incompatible with html5, I have to use mp4 videos. However, the videos are somehow discolored in output. Can anyone tell me why this happens, an what I may do to fix it?
The image on the left shows the video in html5 output. The one on the right is taken from the editor.
There is no difference using event or multiple slide mode for the videos.

What do you have set as your slide quality settings? Perhaps you need to increase it.

Similar Messages

Issue with TOC overlaying MP4 embedded video in Firefox (Captivate 7 HTML5 output)

Only in Firefox, I am coming across an issue when I have a video embedded on a slide, the overlaying Table of Contents displays but is not clickable. This is both when the video is paused and playing. The TOC comes over the embedded video area on the slide. I have considered it is possibly a z-index issue with Firefox, but really need a workaround.
Firefox 28.0, Captivate 7 HTML5 package, MP4 video

Hello Kris,
Please check your output in other browsers like Internet Explorer and Google chrome as well.
HTML5 output from Captivate is tested and supported only on below browsers
Internet Explorer 9 or later
Safari 5.1 or later
Google Chrome 17 or later
http://helpx.adobe.com/captivate/using/publish-projects-html5-files.html
Thanks

Video Issues with HTML5 Output

Hello there,
I have a project with several videos on seperate slides that are located inbetween normal content slides.
Works fine with SWF output and HTML5 output viewed on the pc, but...
when I test the course on an iPad the video plays quite fine the first time I watch it.
However when I jump back to the video the screen stays black for the duration of the video.
When there is audio in the video the audio plays but the screen stays black!
What I happening here?
Someone any ideas?
Thanks in advance
Ruwen

Hello there,
Have you inserted multi slide synchronized video or event video?
and which format of video have you inserted?
Please tell the complete version of Captivate 6 (help> about captivate) and which version of iOS is it?
You can also try improve the slide quality to optimized or 24 bit in the properties of the slide (for every slide).
Thanks.

How do I get my MP4 videos to play on an HTML5 player?

My urls don't work when I put in in a HTML5 player. The player asks us to put the url in between key their code under.
{mp4remote}http://domain.com/media/paris.mp4{/mp4remote}
but I see we need a video url with http://
and not the url type Azure/storage/mediaservices/containers gave under https://
Is that the problem?
https://mediasvc76mwd0vnlqz3l.blob.core.windows.net/asset-00a93272-9432-47a3-b53b-3b97263f0214/designers_CHANEL__film_The_Making_of_film_Reincarnation_%20with_%20Pharrell_Williams_Cara_Delevingne.mp4
BTW I'm using Joomla configured by Azure. SO my Joomla site is linked to Azure through server name.

Something like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Video Player</title>
    <script src="</script">http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
    <video id="videoPlayer" width="420" height="340" autoplay controls onended="getNext()" >
        <source type="video/mp4" >
    </video>
</body>
</html>
<script>
    var videos = ["li-49.mp4", "li-46.mp4"];
    var i = 0;
    var n = videos.length;
    $(document).ready(function () {
        var videoPlayer = document.getElementById('videoPlayer');
        videoPlayer.src = videos[i];
    function getNext() {
        while (i < n - 1) {
            i = i + 1;
            videoPlayer.src = videos[i];
</script>
Frank

I'm trying to open a simple HTML5 document containing MP4 video to no avail. Why the same document opens nicelly in, e.g., Chrome?

Small sample code (with changed delimiters to avoid parcing) which opens in Chrome but not im FF5.0:
<pre><nowiki><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title></head>
<body>
<video controls src="videofile.mp4">
</video>
</body>
</html></nowiki></pre>
The above code file and the mp4 video file are in the same folder.

Thanks for your helpful answer. Please forgive my *duh* behavior. I'm not used to HTML5 tags yet. I followed your links and the glitch became obvious.
But as I found out, Firefox has an amazing alternative behaviour: if you click with the right mouse key on the *gray x-ed screen of death* and choose the "Show video" option, then the (non-supported) .mp4 file opens with Windows Media Player, my default application for .mp4 files. So, even if Firefox does not support directly .mp4 files, one still can watch the video with the standard application... Awesome. I'll just add some text im my document to guide Firefox users.
Cheers!

Why doesn't my mp4 video play from an HTML5 Course?

I have an online course that consists of 6 slides. 4 of those slides are for delivering streaming video from a Flash Streaming Server. Per our LMS Solution Provider, I have modified the streaming path names so they point to the mp4 files on the streaming server. I have the same online course that is published as HTML/SWF to SCORM2004. That version of the course has the video place holders pointing to the same directories on the Flash Streaming Server, except the stream path/name points to the FLV video files. That course plays just fine. I have a Flash Streaming Server test tool from my LMS Provider that I can use to test the mp4 video files to ensure they stream properly. I have tested the stream names that point to the mp4 files using that tool and the video file stream just fine. When I launch the same course from our LMS using the content that was published in Captivate 6 as HTML5 to AICC specs, the course launches but the mp4 video files do not play. Keep in mind that they are set to stream and not download. I can advance thru the slides using a playbar, but the video will not play. Is anyone else having this kind of problem? Any ideas on where I can look?

I have tried Google Chrome ver. 26.0.1410.43 m. I have also tried in IE 9. It is my understanding that these are HTML5 compliant. Since posting this question, I saw some additional information in a different area of the Adobe Forums that suggests that it is not possible to stream MP4 Video from an Adobe Captivate 6 course that is published to HTML5. It was not real clear in the way it was stated, but it seemed to imply that you can embed MP4 video but you cannot stream MP4 video using RTMP from a Flash Streaming Server. I am now trying to get someone to confirm that statement from the Adobe Captivate 6 Team. I assume that the Captivate 6 Team monitors this forum.

Trouble playing .MP4 video embedded in html5 in UIWebview

i have html5 files offline with .mp4 video embedded into it. When i load this html5 file into uiwebview, video does not play.
<div id="video">
<video src="_media/_videos/Page-02.mp4" type="Video/Mp4" autoplay width="1024" height="768"></video>
</div>
in viewdid load i have
NSString *path=[[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"LANDING-PAGE-02"];
    NSURL *url=[NSURL fileURLWithPath:path];
    NSURLRequest *request=[NSURLRequest requestWithURL:url];
    [webView loadRequest:request];
this opens html pages without including video into it, but when video is present its not getting played.

Hi ,
The issue is with the iOS 5 and if you try to play the video in iOS 6 it will solve the problem

What is the best video format for streaming video in Captivate 6 for html5 output?

I'm guessing it's h.264 mp4, but I haven't been able to get it to stream. Can you stream mp4s from Amazon S3?

Hi Rod,
That link is from the Captivate help file:
You could also find this documented in the help file link:
http://helpx.adobe.com/pdf/captivate_reference.pdf
Look under the topic "Unsupported objects in HTML5 output".
Thanks!

Publishing Event Video to HTML5 ?

I have inserted an event video into a slide and uploaded an mp4 file. When publishing the project and viewing it in a web broswer, the HTML5 output does not allow for any video controls, and as such the video does not play.
I cannot publish the video as a Multi Slide Syncronized ideo as I have several of these videos and would like the playbar within the slides and not as a whole for the project.
I have tried viewing the output in Firefox, IE, and Chrome and none of them work.
Is there some step I am missing? How can I view the playbar for each video object in HTML5? Thanks!

Hi Andy,
I have the almost identical issue. I can insert the video onto the stage and select which skin/control to use, and it appears fine if I preview the project (swf), but the skin/controls do NOT appear if I publish to HTML5.
Did you ever find a solution on your own?
If not, it looks like I'll be stuck either with launching the mp4 video in a new window (using learner's media player) or using the auto-play to show it on stage with no controls.
Thanks for posting this question!

Streaming video into HTML5 content

Hi
I just wanted to check that it is possible to stream (rather than progressively download) video into captivate HTML5 output. I know this can be done when outputting to to SWF but my client wants to go HTML5 only and the video content has to hosted off the LMS
I quote
.... media files must be externalized, e.g., separate zip and be either a) hosted by and accessed from the vendor site (preference) or b) hosted on an internal media site (secondary).
Any help/thoughts much appreciated!

Try the option menu Video/Insert Video/Event Video, off course as quoted on the window itself the video must be on a media streaming.
If doesnt work, one time I have to use a streaming video too, I use the youtube widget and uploaded my videos to youtube so youtube will handle all streaming (the best choice for me).
In another project I needed an small intro video, so I used JS (using methods like listeners and jquery) to
create a video element with a preloader:
var videoIntroElement = document.createElement("video");
videoIntroElement.setAttribute("id", "videoIntroElement");
videoIntroElement.setAttribute("autoplay", "true");
videoIntroElement.setAttribute("preload", "auto");
videoIntroElement.setAttribute("width", "100%");
videoIntroElement.setAttribute("height", "100%");
videoIntroElement.setAttribute("type", "video/mp4");
var videoIntroElementIconLoading = document.createElement("img"); document.getElementById("div_Slide").appendChild(videoIntroElementIconLoading) ;
$(videoIntroElement).bind("ended", function() {
startCourse();
That´s it you have a lot of options.

Adobe Presenter & MP4 Video

In Presenter 10, can I use PowerPoint to produce a MP4 video with quizzes and also able to view learner interactions?

No. Presenter doesn't output to MP4. You may want to look at Captivate for that.
However, keep in mind that MP4 is a video, which means there is no interactivty. No tool will output an MP4 with quizzes and learner interaction tracking. You are looking at outputing to either Flash (SWF) or HTML5. Both Presenter and Captivate can output to either format (thought HTML5 does have some limitations on functionality) and can have quizzes and track learner interactions. Either format can have MP4 content within it, but they won't be straight up MP4's.

How can i get an MP4 video file to work in iMovie 08'?

I'm currently editing a wedding video i recorded on my Sony DV camcorder in iMovie 08' and want to splice a MP4 video file (from a mobile phone- make unknown) of the married couple on their first dance into the footage but can't
How do i go about acheiving this?

Autoplay is not universally supported by all devices. Many smatphone data plans can't handle the burden of preloaded and auto playing media. There's nothing you can do to change this b/c mobile devices simply ignore the parameter.   All that said, why are you still using player plugins? You don't need them with HTML5 video.
Copy & paste this code into a new, blank document. Change video files to your own.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with Video</title>


</head>
<style>
video {
    max-width:100%;
    display:block;
    margin:0 auto;
</style>
</head>
<body>
<h2>Use 3 File Types to support all browsers & mobile devices: MP4, WEBM and OGV.</h2>
<h3>Online Video Converter
http://video.online-convert.com/</h3>

<video controls poster="Your_poster_image.jpg">

<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
If you're seeing this, you're using an
outdated browser that doesn't support
the video tag. </video>

</body>
</html>
EDIT: I forgot to move the closing </head> tag in my original post.
Nancy O.

How do I get an MP4 video file to autoplay instead of download

I am using Dreamweaver CS5.5. I am trying to embed an .mp4 video on my website to autoplay. When I take it to "Live View" the file plays - if I use the "Play" function in Properties I get the following message - "Unable to find the plugin that handles this media type. Dreamweaver looks in both the "Configurations/Plugins" folder, and the plugins folder for each of your selected browsers." When I publish the page and go to my website to view, the video does not play - instead, the file downloads to my computer. What can I do to remedy this issue?

Autoplay is not universally supported by all devices. Many smatphone data plans can't handle the burden of preloaded and auto playing media. There's nothing you can do to change this b/c mobile devices simply ignore the parameter.   All that said, why are you still using player plugins? You don't need them with HTML5 video.
Copy & paste this code into a new, blank document. Change video files to your own.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 with Video</title>


</head>
<style>
video {
    max-width:100%;
    display:block;
    margin:0 auto;
</style>
</head>
<body>
<h2>Use 3 File Types to support all browsers & mobile devices: MP4, WEBM and OGV.</h2>
<h3>Online Video Converter
http://video.online-convert.com/</h3>

<video controls poster="Your_poster_image.jpg">

<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
If you're seeing this, you're using an
outdated browser that doesn't support
the video tag. </video>

</body>
</html>
EDIT: I forgot to move the closing </head> tag in my original post.
Nancy O.

How to embed and play mp4 video in HTML AIR application?

Adobe Air HTML / JS application compiled from SDK command line. I am not using flash pro or flash builder to create the application.
I was using dreamweaver but the dw air plugin seems to have stopped being developed so I switched to using the command line tools.
I am creating desktop air application that has embedded mp3 audio and also I want to embed mp4 video.
Using jQuery and the AIR js plugin I am able to play audio via buttons hooked up via jQuery and the AIR js plugin from the SDK.
What I am doing is creating proofs for clients in AIR and sending link to the client to download the application. I embed the media because I do not want to place them on a website where it could possibly be seen by non-clients and get picked up in the SE's.
I am finding it hard to understand the AIR process for playing video. I read that it is the same procedure as audio but it does not work.
If it was hosted on youtube or somewhere embedding the web player would be simple, just copy paste some code and it works. When actually embedding the video say mp4, f4v, mov, wmv or similar file formats I can't get AIR to play the video. Audio, not a problem it works great.
I would like to do the following with video.
Embed the actual file in the AIR app. I can do this, it gets embedded.
Play, pause and stop the video - Can't get this to work
Get the current stop point and be able to start the video by sending a start point - This is all working with audio I just want to do it with video.
I have searched the forums, the search engines, youtube and read through the documentation on Air but the video does not work at all.
I need code samples and direction on how to make an embedded video play inside of a desktop air application using the HTML / JS air model. I am using the command line tools to create the air package and test the air app.
Please help if you have figured this out.
Thank you.
Not sure if this matters but I am using Windows 7 Pro 64bit as my development machine.

In addition I also can not get html5 video to play in the adobe air app. Would this issue be tied to the above?

Mp4 Video on a iPad

Hi there,
I have the following problem. I have integrated into Captivate 8 a short video sequence in a slide. The Project is published as HTML5 file incl. Scorm 2004 Revision 4 in ILIAS LMS.
This all works great so far. I can see the video sequence on the iPad to play but only for one time. When the Videosequenz is finished the small panel in the video window can then no longer use.
My question are:
- Does anyone happen to have the same problem?
many greetings
Jochen

Wedding video was shot with iPad. MP4 video file was emailed to family member with PC. Family member can't view MP4 file in iTunes or Quicktime or Windows Media Player. How can we open and view this file?
If files don't play in either Apple or third-party media players then I would normally suspect that either the file containers or file data was corrupted during the transfer/email process. The H.264/AAC content recorded by Apple mobile devices should be compatible with any media player capable of playing MPEG4 AVC standard JVT project partnership files in MP4, M4V, or MOV file containers.

Discoloring of mp4 videos in html5 output

Similar Messages

Maybe you are looking for