This is in relation to Issue 22:

#22 (comment)

Internet Explorer 8
Windows XP
Flash 11,0,1,152

Using the CDN version of HTML5 Media:

<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>

My video tag code:

`

Using Charles Web Proxy, I monitored the network traffic:

Firefox, Chrome, etc. successfully preload the HTML5 video.

Flowplayer in IE8 does not preload the video. The video does not begin downloading until the user initiates the video by clicking the Play button.

Hi there,

i am using html5media with WordPress on this site, which is atm in development: http://newarts.at.dd17408.kasserver.com/domains/natascha-kampusch.at/

Everything works fine fine as long as the browser does support html 5 video, but in older browsers (FF 3.**, IE < 9 etc) when Flash is used, the videos just don`t play.

The videos are encoded in mp4 (h.264, works on iphone) and .webm.

I tried so many thing including removing other javascript files but i can`t get it work. Do you have any idea?

regard Drazen

`

Expected: Movie to play on iPhone4

Actual: No movie whatsoever loads.

Video works fine in Chrome, Firefox 9.0.1 but I get a Play icon on iPhone and nothing for iPad

Here is the code used with the full source removed. Sample can be found here: http://braveman.robspages.net. The video is the center panel of the banner.

<script src="http://api.html5media.info/1.1.5/html5media.min.js"&gt;&lt;/script>

<video id="monument" width="448" height="191" autoplay="true" loop="true" preload="auto" poster="banner-center.jpg">
<source src="monument-web.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' />
</video>

Also, adding the following as a second source breaks Firefox (falls through to the poster image).
<source src="monument-web.webm" type='video/webm; codecs="vp8.0, vorbis"' />

apple exports H.264 movies with the extension .m4v, HD versions with .mov

when i test html5media on IE9, these movies won't play - IE9 is assumed to support the html5 video tag, but apparently doesn't want to play .m4v or .mov (i get a little red cross).

i can solve the problem for the .m4v files by changing the extension to .mp4,
but wouldn't it be possible to adapt the html5media so that when a file-type is encountered that is not supported by a certain html5-capable browser, it switches anyway to the flash variant? (i can play all these videos with html5media on IE < 9, because of the fallback to flash)

When trying it on Firefox or IE8, the video fallbacks to FlowPlayer and looses its original size a get bigger. Any solution?

f4v type is not supported ? Can you add codec in to your js file for f4v mimetype ?

Thank you.

There's a bug in the current flowplayer audio plugin, whereby some MP3 tracks, when preload is set to true, will play uncontrollably.

If this can't be fixed via an upgrade, put in a workaround in the JS.

The audio controls don't display in ie9 when preload is set to none.
IE9 doesn't display the native player.
I think its an ie bug, the player is actually there and you can right click on it and you get a popup which gives the option to play and pause., and it plays.. its just not visible.

If preload is set to auto or metadata its visible.

Do you know a workaround for this? If it loaded the flashplayer in ie9 that would be ok i think..

I like the simplicity of html5media, and think it should be good if things weren't so complex these days.

Do you have a list of tested browsers/os and mobile devices?

Thanks.

Can I use a flash player other than Flowplayer ?

If you have additional CSS like position absolute and such, it removes it when doing the fallback. A simple fix is to add:

j.title=b.title;
j.style.cssText=b.style.cssText; <--Added
j.style.display="block";

Sometimes it is desirable to override the html5 video support detection used by html5media. For example, a website might want to enable the fallback on specific browsers whose html5 video implementation is known to be buggy.

This callback would have a signature like:

html5media.requiresFallback(tag, format) {
    return false;
}

A user could then override this callback to do further browser detection. Returning true would force the fallback. Returning false would delegate to the default detection mechanism (based on the mediaElement.canPlayType implementation of the browser).

An example use of this feature would be to force the fallback to appear on all browsers, thus allowing a consistent cross-browser UI. This would be enabled as follows:

// Enable flash fallback on all browsers.
html5media.requiresFallback(tag, format) {
    return true;
}

A more sensible approach would be to do client-side browser detection and only enable it some some browsers. This could be a workaround for the current webkit tendency to preload videos regardless of the preload attribute of the video tag.

Hey, maintainer(s) of etianen/html5media!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library etianen/html5media is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "etianen/html5media",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

I realize that this may be an uncommon use, but I'm using a single <audio> element to play multiple tracks. That is, the element starts out with no source (just <audio autoplay></audio>) and, based on the user's interaction, loads a specific file and begins playing it.

html5media appears to assume that the element has at least one source. This document, for instance, raises an error in the latest versions of Safari and Firefox for me:

<html>
    <head>
        <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>
    </head>
    <body>
        <audio></audio>
    </body>
</html>

The error as reported by Safari is:

TypeError: 'undefined' is not an object (evaluating 'a.match')

Oddly, I can only seem to recreate this in the minified version of the script -- maybe this is fixed in the latest source?

Hello!
htmlmedia is great but it doesn't work with Microsoft Internet Explorer 8.0.6001.18702 (French version)
it is the latest IE for Winxp. A lot of users have it. It is the version which is updated by windowsupdate and automatic updates.

Code:
script src="http://api.html5media.info/1.1.4/html5media.min.js"__/script
audio src="http://www.mysite.com/138.ogg" controls preload_/audio_

OR the same but with MP3
script src="http://api.html5media.info/1.1.4/html5media.min.js"__/script
audio src="http://www.mysite.com/138.mp3" controls preload/audio*

Chrome, Firefox OK but IE doing nothing: the page is blank.
The Flash player should appear but nothing appears. Of course, Flash is OK on this computer.

I'm sorry, I don't know how to write down the code, I've been obliged to put * but it the very basic script.

Could you please fix this problem?
thank you

I have a file embedded in a page but in FF it looks like this. The page appears to try and load flowplayer, but it just renders the blank box, instead of an actual player. This is using v. 1.1.6 and the behaviour is the same in both versions of FF. The file is an mp3, and it works as expected in chrome and safari. Just wondering if i've missed something:

this is my haml to include in the template:
%audio{:src => @song.song_file.expiring_url(600), :controls => true, :preload => true}

Hi Etianen

You ARE RIGHT for the format of video in native browser Galaxy-S Android 2.2
the good format is a file mp4 Apple Iphone (and a simple mp4)
Nota : i don't understand why when i call http://www.html5media.info when i click in video: i have a error message (video not compatible)
Format : AVC
Format/Info : Advanced Video Codec
Format profile : [email protected]
Format settings, CABAC : No
Format settings, ReFrames : 2 frames
Codec ID : avc1
Codec ID/Info : Advanced Video Coding
Duration : 44s 600ms
Bit rate mode : Variable
Bit rate : 818 Kbps

Format : AAC
Format/Info : Advanced Audio Codec
Format version : Version 4

After several tests
For the native browser android 2.2 , how can I have the buttons bar or other solution (a button picture in front of poster) with

in last version firefox android, with the instruction, I have the buttons bar
in last version of mobile opera android, with this instruction I have the buttons bar
in pc with all browsers (5) I have the buttons bar
What is my mistake ?

nota :with the site http://www.html5media.info, I have the same problem in native browser android
part of USER_AGENT : ...................... Android 2.2 .............Version/4.0 Mobile Safari/533.1 ...................
file : test-mp4.html

2. with Flash sound player (IE8 xp, Safari 5.1 xp, native browser android)
   the sound plays directly if it is a big file OR ?? Flash uses the good file the file audio.mp3 , but it plays directly
   with the lines

                <audio class="audio" controls preload>
                    <source src="media/audio.mp3"></source>
                    <source src="media/audio.ogg"></source>
                </audio>

What is my mistake? the file audio.mp3 is ok with other players NOT FLASH : Opera mobile (mp3), chrome pc (mp3) , Safari pc(mp3)
-with your file mp3 (500-600ko) I don't have the problem.

file : index.html

Excuse-me for my questions
Thank-you for your patience and your answers
Best Regards
Jean-Paul
NOTA : I send to you the files ([email protected])

Hi, is there a way to provide a method where we can use a licensed version of Flowplayer so that the watermark is not visible on the Flash fallback?

the latest wordpress (3.7.1) use its own shortcode:
https://codex.wordpress.org/Audio_Shortcode
https://codex.wordpress.org/Video_Shortcode

and latest post with audio using shortcode cant be played anymore on chromium 30 on ubuntu 12.04.

here's example old post with manual embed audio code and playable:
http://alkitabiah.org/index.php/topik-sermon/416-kotbah-learn-from-naaman

here's example latest post using wp shortcode and unplayable on chromium:
http://alkitabiah.org/index.php/topik-uncategorized/631-khotbah-harus-lebih-teliti

but, firefox can play both without problems.

We have a page in which only the last x number of postings appear. If the user clicks on the See More link, the script makes an ajax call for additional postings. Any of these additional postings that contain video tags do not play/load in Firefox 5.0.

You can check this by going to our site http://www.mymommemories.com/ and clicking on the see more button at the bottom until you see the Doin' the Macarena! post.

I've tried several different file formats, ogv, mov (mp4), flv. None of them would play.

If the video was on the initial page load everything loaded/played fine.

You can check this test page.

http://www.learnquickly.com/video_test7.html

If one clears the cache, it plays fine one more time. Then the cache needs to be cleared again.

Just a black box where the video should play. Chrome and FireFox seem fine.

Hello,

I'm following "README.markdown" and noticed "http://api.html5media.info/1.1.7/html5media.min.js" shows a 404 error. Is it still being hosted?

-Leslie

If you do the following in IE8:

1. Visit http://estrovenchangingways.com/

2. View the video on the page - it currently works

3. In the primary navigation at the top of the page select Blog >> Christy

4. Her video appear as a gray box / rectangle.

The error is as follows:

=============== ERROR HERE

function __flash__addCallback(instance, name) {
instance[name] = function () {
return eval(instance.CallFunction("<invoke name=""+name+"" returntype="javascript">" + __flash__argumentsToXML(arguments,0) + ""));
}
}

-------------- The error is on the return eval(.....)); line

============= CONSOLE LOG
script block (1716), line 49 character 5
SCRIPT16389:
script block (1716), line 49 character 5
SCRIPT16389: Unknown name.
script block (1716), line 49 character 5

============= STACK TRACE

Main page

Anonymous function, script block (1716), line 49
Anonymous function, html5media.min.js, line 8
unload, html5media.min.js, line 4
Anonymous function, html5media.min.js, line 3
i, html5media.min.js, line 1
load, html5media.min.js, line 3
Anonymous function, html5media.min.js, line 14

The function that handles the blog loading is as follows:

function load_blog(href) {
_gaq.push(['_trackEvent', 'Blog', 'View', href]);
document.location.hash = href;
$(".post-area .photo img").attr("src","/public/images/loader.gif");
$(".post-area .container .name").html("Loading...");
$(".post-area .container .str").html("");
$(".post-list").hide();
$(".week-box").hide();

            scroll_to("#blog_page_holder", href);
            $.get(href, function(data){
                    document.getElementById("blog_page_holder").innerHTML = data;
                    $(".post-list").show();
                    attach_video_events();
                    set_video_size();
                    html5media();       
            },"html");
        }

Thanks in advance,
Todd

Fullscreen mode is available in a few of the native players, and there's no reason to disallow it in the flowplayer fallback.

If the visitor's browser doesn't support a specific media format and there is no Flash plugin available, then, instead of the audio tag or the SWF object tag, this HTML gets inserted:

<span id="my-audio-file" class="audio-player" title="" style="display: block; width: 250px; height: 26px;">
    <h2>Flash version 9,0 or greater is required</h2>
    <h3>You have no flash plugin installed</h3>
    <p>Download latest version from <a href="http://www.adobe.com/go/getflashplayer">here</a></p>
</span>

Where the id and class attributes where are those present in the original HTML. The problem is, when using html5media for an audio tag, the area is just too small for the "download Flash here" message. Styling it using CSS is not enough, and it makes sense to at least provide the user with an ease access link to download Flash.

In this case is necessary to provide a custom HTML, a shorter (and easier to style) version of the download message.

I have noticed that in Safari 5.06, the control bar stays visible until the video is started, so it's not really necessary to have a poster image.

But in IE 8 and Firefox 8.0.1, the control bar autohides afer a few seconds, so you really need a poster image or people might not realize it's a video.

It would be better if this was consistent; if I had to pick, I would choose the Safari method, because mobile devices like the iPhone provide their own start button, so it's cleaner not to have a poster image at all.

Confusion is created because Safari won't start the video playing by clicking the poster image, you have to start it using the control bar. So if you provide a poster image for IE and Firefox users, Safari users are confused because they see the start button in the poster image, click on it, and nothing happens.

It would be great if someone had some ideas about how to make the control bar behavior consistent across the major browsers.

If mp3 codec support missing, html5media doesn't default to flash flowplayer on chrome. It does default to flowplayer on Firefox.

html used:

Chromium 18.0.1025.142 (Developer Build 129054 Linux) Ubuntu 11.10
html5media: "http://api.html5media.info/1.1.5/html5media.min.js"

please update using latest flowplayer.
it wont play my audio at alkitabiah.org

tnx.

Hi, I’m doing the HTML5 Video Comparison site http://praegnanz.de/html5video/

I discovered a strange bug in the flash fallback, which is quite hard to spot. In the case of having only the mp4 file (no webm alternative), Firefox 4 and Firefox 5 load the flash player somehow, but it’s complete black and there comes no Flowplayer logo, and no video, of course.

It occurs never on the local server and it occurs more often when the browser cache is activated, but even with de-activated cache sometimes the show will not show up correctly!

I assume there’s some strange kind of timing issue, where the swf is not fully loaded at a certain time, I don’t know. Can you see that problem, too?

Expected: Movie to play on iPhone4

Actual: No movie whatsoever loads.

When this project was hosted on Google Code, it was possible to reference the script on Google's servers and not host it locally. You don't appear to provide a similar link for Github. If we have security concerns with hosting Flash files on our web servers, is there somewhere we can reference the files at?

I know the reference to the code on Google still works, but it appears to be a version behind; will that code go away entirely in the future?

is it possible to let us choose other flash player instead of flowplayer?
perhaps something that support ogg?

tnx

Please check below.

http://dl.dropbox.com/u/8587/tc/test.html

Only chrome works well. Any idea?

Version 1.1.3 on IE8 throws this error when the video tag has no source attribute (and instead has multiple nested source elements. Replacing the source elements with a src attribute fixes the problem, but that breaks Safari which requires a different source format than other browsers.

This may be triggered by placing the video in a lightbox/popup. Doesn't seem to happen if the video is embedded in the main HTML page.

I apologize if this is a novice question, but I downloaded html5media-master and read the instructions. The instructions say to simply include the script at the head of the document, but when I look at your code, it's clearly looking for some of the elements in the lib folder. So exactly how do I set this up? Do I need to copy the elements from the lib folder into my js folder which holds html5media.js?

One of the initial appeals of html5media was it's simplicity. All you had to do was include a single source file, and you were done. This was implemented by hotlinking to the old Google Code SVN repository.

A problem with this approach were that tiny changes in the repository head, such as when new features were being developed, could break live sites.

Now that html5media has been stable for some considerable time, might it not be a good idea to provide a hosted version that keeps you in step with minor version releases be a good thing?

Upvote or comment if you want to see this.

Testing on stock Nexus One w/ stock browser (both 2.3.6), XOOM tablet and ASUS Transformer Tablet (both Android 3.2.1), on project site (html5media.info):

This concerns audio player only.

Android 2.3.6 (Nexus One):
Audio player appears with (from l to r) play button, progress bar, rewind button, fast forward button. Pressing the play button (single triangle) does not initiate audio playback; nothing happens. Pressing the 'fast forward' button (double triangles) starts audio. progress bar begins moving, and play button changes to pause button. Subsequently, pressing the pause button does pause the audio and changes the button back into a play button, but, again, pressing play does nothing and pressing FF resumes audio playback.

Android 3.2.1 (XOOM and Transformer):
Audio player appears with play button and progress bar only. Pressing the play button does not initiate audio playback; nothing happens. Pressing the slider on the progress bar starts the audio. As above, pause works, but must press slider again to resume audio playback.

This would allow browsers with a poor or buggy native UI to be sidestepped with Flash.

Hi,

I am using the html5media script and it is very nice.
I've only one problem and I am not sure how to solve this issue.

Every time when the video starts the controlbar becomes invisible and comes only back when moving with the mouse over the video. How is it possible to let the controlbar stay visible?
Also, I would like to add an additional button to open the video in fullscreen. Is there any possibility to do this with html5media?

Thanks for your help in advance!
in case that this is the wrong area for posting my question please give me a small hint where to move my post to.

Thank you very much in advance!

Best regards,
html5media-tester

I tried to play a m4v-File (exported by QuickTime on Mac for iPhone-Devices) but IE9 does not know how to play the file. There should be the flash fallback but it isn't.
The same occures when I try to play some mp4 files (not optimized for iPhone).

Could it be possible that the IE9 is not supported yet?

Get an error telling me that video.play is not supported.

How do I enable these in the flash fallback - they don't appear natively. Also if you had any resource for enabling a loading animation in HTML5 that would be awesome! Great work btw.

This is probably some issue related to my css, but for whatever reason the controls do not display properly (appear to be white) in Chrome 12.0.742.60 beta (OS Ubuntu 11.04). In Firefox they appear fine.

Thanks,

Paul

People who have an own webspace must encode the video files before uploading and using html5media. I offer a free (and without registration) service for online conversion.

After conversion a mp4 (h264 / aac), a poster (jpg) and a html file (with html5media!) is available.

http://mp4generator.reloado.com

Please give some feedback. A mention for beginners on your site would be great ;)

I currently have a https site only and IE doesn't like it when I source http within a https site. Can we get something like the following:

<script src="https://api.html5media.info/1.1.4/html5media.min.js"></script>

Video in IE8 isn't running. Loading the FlowPlayer fails, cause http://static.flowplayer.org/swf/expressinstall.swf doesn't exist anymore.

I'm not sure if there is a newer FlowPlayer version which should be used by html5media or if it is an issue of FlowPlayer itself.

Setup:

• Windows XP, IE8
• some old Flash Player, which needs to be updated to use the FlowPlayer, so the script wants to load expressinstall.swf
• Including html5media via <script language="JavaScript" src="http://api.html5media.info/1.1.5/html5media.min.js" type="text/javascript"></script>
• providing mp4 and ogg

how can i auto enter FullScreen on starting playing？

HTML5 has tag, and Flowplayer has captioning support, so it won't be too difficult, would it be?
Thanks!

The demo uses the following HTML:

<video poster="demo/poster.jpg" width="352" height="264" controls preload>
 <source src="demo/video.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
 <source src="demo/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
</video>

(By the way, you shouldn’t close the source element.) The codecs part is optional and can be omitted in HTML5:

<video poster="demo/poster.jpg" width="352" height="264" controls preload>
 <source src="demo/video.ogv" type="video/ogg">
 <source src="demo/video.mp4" type="video/mp4">
</video>

However, this causes html5media to break. The getMimeType() function relies on the semicolon (;) being there in the type attribute.