Flowplayer loading bar not going away - javascript

I've been working on a video uploading script, you can upload a video (I haven't tested all video formats yet) and it'll convert the video to .mp4, .ogg, and .webm files.
I'm using flowplayer to embed the video, and you can see a test video working, but the loading bar doesn't go away so you can't get to the controls. Here's my embed code:
<link rel="stylesheet" type="text/css" href="<?=$url;?>javascript/flowplayer/skin/minimalist.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="<?=$url;?>javascript/flowplayer/flowplayer.min.js"></script>
(I don't think that part is the problem)
and
<div class="flowplayer" data-swf="<?=$url;?>javscript/flowplayer/flowplayer.swf" data-ratio="0.417">
<video autoplay>
<source type="video/webm" src="<?=$video->file('webm');?>" />
<source type="video/mp4" src="<?=$video->file('mp4');?>" />
<source type="video/ogg" src="<?=$video->file('ogg');?>" />
</video>
</div>
I've tried removing the data-swf and the data-ratio attributes, I've tried moving around the link and script tags, but no cigar.

I found the problem, I'll put it here in case anyone gets the same problem.
It might have to do with using the newest jQuery version from Google's hosted library, but flowplayer.js had this:
on("mouseout.tip", function()
When they should have used
bind("mouseout.tip", function()

Related

VideoJS skin not showing on Firefox or Chrome

I am trying to implement a videojs player on a basic web page with the Sublime skin.
I have added the source links from the videojs website, copied the html and css from the codepen above however the default player is loading and not the skin. The web page also never stops loading, I have to hit the x button on the browser.
The console is fine and there are no errors.
I think I am missing something but I don't know what! Any help appreciated. I don't have a live version of this web page but if it helps I can put it online. Thanks!
From the Sublime Codepen:
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="assets/css/video-feature.css">
<link href="https://vjs.zencdn.net/7.6.5/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-sublime-skin" width="640px" height="267px"
controls preload="none" poster='https://video-js.zencoder.com/oceans-clip.jpg'
data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
<source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
</p>
</video>
<script src='https://vjs.zencdn.net/7.6.5/video.js'></script>
</body>

What am I missing to have this appear in IE8?

I have several video-js player code on a web page like this:
<video id="vid1" class="video-js vjs-default-skin" width="140" height="120"
controls poster="/1video/countdown.jpg" data-setup='{}'>
<source src="/video/test.mp4" type="video/mp4" />
</video>
And this in the header:
<link href="/video-js-4.12.5/video-js/video-js.css" rel="stylesheet">
<script src="/video-js-4.12.5/video-js/video.js"></script>
<script>videojs.options.flash.swf = "/video-js-4.12.5/video-js/video-js.swf"</script>
What do I need to add so the players appear in IE8? Any help will be appreciated.
Unfortunately, Internet Explorer 8 does not support the <video/> tag that you are using.
Source
Update
video.js should fall back to Flash when loaded in a browser that does not support HTML5 video (e.g. IE 8). There could be several reasons why yours is not working:
Ensure that poster image is set
Use a self hosted version of video.js rather than the CDN. Then ensure that your path to video-js.swf is accurate within the JS file
Ensure that your flash plugin is up-to-date
No. 2 might be most pertinent to your issue. I see that in your header you attempt to change an option. Perhaps try removing that and just ensure that the file path in video.js is accurate (open the JS file and search for video-js.swf).

Audio Track Duration Showing "Infinity:NanNan" in Safari Only

I've got an audio file being played with the basic HTML5 audio tag:
<audio controls itemprop="audio">
<source src="http://mysite/mus/my_music_file.mp3" />
</audio>
I'm using Audio.js along with the audio tag for serving up a fallback flash version, as well as a nicely designed player.
In Chrome and Firefox, everything is working as it should, and it's showing the length of the track. Safari is showing: Infinity:NanNan in the spot where the song's length should be shown.
I did a search and found a few similar questions, but both seem to be talking about PHP headers? I'm not using PHP with my audio files, but it is within a Wordpress theme. Could that be an issue?
you should indicate the codecs, and not preload
<audio preload="none" controls>
<source src="/path/to/the/source" type="audio/mp3" codecs="mp3"/>
</audio>

ie10 html5 audio preload

I've been working on a musician's site with html5 audio playback. Everything works fine in Firefox and Chrome, but IE has been giving me issues, and I narrowed it down to the way I'm loading the media.
Part of my strategy to obfuscate the media source is to have an audio tag with no source, then add the source via javascript.
If I manually write the html, IE10 honors the preload="none" attribute, but if I don't include the sources and add them to the DOM via javascript, the preload attribute is ignored.
Example 1 works as intended:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 audio test</title>
</head>
<body>
<p>
This is an audio tag with two source tag children of different types. Preload is set to none.
</p>
<audio id="audiotest" preload="none" controls>
<source src="test.ogg" type="audio/ogg">
<source src="test.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Example 2 loads starts to download the media despite the preload attribute:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 audio test</title>
</head>
<body>
<p>
This is just an audio tag with preload none with javascript adding the sources.
</p>
<audio id="audiotest" preload="none" controls>
</audio>
<script>
var oggSource = document.createElement('source');
oggSource.type='audio/ogg';
oggSource.src='test.ogg';
var mp3Source = document.createElement('source');
mp3Source.type='audio/mpeg';
mp3Source.src='test.mp3';
document.getElementById("audiotest").appendChild(oggSource);
document.getElementById("audiotest").appendChild(mp3Source);
</script>
</body>
</html>
Here are the working examples:
http://www.joshblackburn.com/test1.php
http://www.joshblackburn.com/test2.php
I was trying to figure out why none of my controls were working in IE. I figured out that it was downloading every single track and locking things up. Using the dev panel in IE10, the network trace confirms the issue.
Is this an IE bug? Do I need to figure out different ways of obfuscating my sources?
The 'real' page is www.joshblackburn.com/new.php?page=albums if anyone is interested.

Chrome - not playing multiple videos - network stuck in pending

I have 2 video elements on my test page, like so:
<div id="parent">
<video id="foo" autoplay>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg" />
</video>
<video id="bar" autoplay>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm" />
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg" />
</video>
</div>
In the latest FF, everything works fine. In Chrome however, neither of these videos will play; looking at the net tab reveals that they get stuck in 'pending' status for anywhere from a few seconds to infinity. If I comment out/remove a video element, the other will play.
I've seen multiple Chromium bug reports talking about similar issues, but none that seem to be directly related to a parent container. I've tried building the markup dynamically through JS with the same result. I've also tried adding codec attributes with no luck.
For the sake of argument, lets say restructuring the page so no videos live in the same parent isn't an option. Is this just an unfixable bug? Any possible workarounds, however hacky?
Solved - apparently making a request for the same filename from the same server at the same time freaks Google out. Changing filenames, or domains, works fine. FWIW, I duplicated the test vids and added 1, 2, 3, etc. to the end of the filenames and ran them from the same server. Works as expected. Using test videos from different domains got me on to the solution.

Categories