flowplayer html5 5.4.6
chome 35+
in flowplayer html5, on chrome i kept getting html5: video encoding not supported or html5: video not found.
I load flowplayer via javascript and have a playlist defined like so:
$(function () {
$('#fp').flowplayer({
playlist:[ [
{ webm: "/usermedia/update_sets/140704/videos/02-480p.webm"},
{ mp4: "/usermedia/update_sets/140704/videos/02-480p.mp4"} ] ],
splash: true
});
});
i checked the video format of the mp4 and all was well. I can even drag and drop the mp4 into chrome and it plays np.
in chrome dev tools i opened the network tab and can see that it tries to open the webm file, get partial content, then cancels the get get.
it never tries to load the mp4 file.
So i tried reversing the order so that mp4 was the first in the playlist.
voila. video plays no problem.
I also tested in firefox and it works without issue.
The question is, why does flowplayer html5 on chrome fail if webm source is specified first in the playlist?
='(
take a look here
i hope this helps you
the browser checks what works but it looks from top to bottom so if the first works for him he wil use it so change the order and it suppose to work
to give an example to you
<div class="flowplayer">
<video>
<source type="video/webm" src="http://example.com/intro.webm">
<source type="video/mp4" src="http://example.com/intro.mp4">
<source type="video/ogg" src="http://example.com/intro.ogv">
</video>
</div>
now webm will go first,
if you change it to:
<div class="flowplayer">
<video>
<source type="video/mp4" src="http://example.com/intro.mp4">
<source type="video/webm" src="http://example/intro.webm">
<source type="video/ogg" src="http://example.com/intro.ogv">
</video>
</div>
.mp4 go first.
Related
I am trying to add audio in my code
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
and above code is working fine.. but i am facing problem if audio is quite big. i have to wait for couples of second to listen the audio,
is there is any alternative for the same so we can play audio instantly without any wait?
I found one solution , see if it works :
You can use the following property of audio element to solve your problem!!
Preload hinting:
You can optionally use the preload attribute to give the browser a hint as to whether, and how, it should preload the audio file when the page loads. Preloading the audio file means it can play instantly when the user hits the “play” button, which is a nicer experience for the user.
<audio preload="auto">
<source src="WhiteChristmas.mp3">
<source src="WhiteChristmas.ogg">
</audio>
Refer this site:
https://www.elated.com/html5-audio/
you could try to check the spelling...i to had this problem but when i checked and corrected the spelling of the file,it loaded instantly.The code is:
<audio controls
Your browser does not support the audio element.
In my case i want to give feasibility to user download mp3 file and it's good working in google crome, but in safari audio tag is working fine but download option is not showing.
html code
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
On Safari 15.3 after fiddling a bit I discovered an option that right-clicking on the middle section of the HTML5 element offers you the menu with action "Download Video as...".
Despite the label, it downloads the audio source of the HTML5 element fine. Note that I tested it only for a wavefile.
I have an HTML5 video element on my page, it's scaled to fill the entire background with the idea being that it will loop as it plays. This works fine in Chrome but Safari and Firefox have stutter on loop. It's a good half a second in Firefox. Any ideas?
Here's my markup for the video player:
<video id="vid" preload="auto" autoplay loop onended="this.play();">
<source src="vid.mp4" type="video/mp4"/>
<source src="vid.webm" type="video/webm"/>
</video>
I've tried a number of things, like controlling the playback entirely with JS instead of relying on the browser to figure it out. But there's always the stutter. I don't think it's an issue with preloading because if I do it all locally the video loads instantly (obviously) but there's still the same loop. Is this just an issue inherent in these browsers?
I'm tempted to create two instances of the video and simply toggle them with JS after each finishes. It'd be really dirty but I'm not sure what my other options are.
I solved it by removing the audio track of the .mp4 during encoding. Not Ideal if you need the audio but it worked well in my case.
I had this issue and I actually fixed it by putting the webm source before the mp4 source. That way it tried to load the webm video format first, and it had less stutters when I was testing it. mp4 and ogv files both had stutters in Firefox and it drove me nuts, so I was amazed when webm files seemed to work as intended.
<video id="vid" preload="auto" autoplay loop>
<source src="vid.webm" type="video/webm"/>
<source src="vid.mp4" type="video/mp4"/>
</video>
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>
I've got some trouble with the <video> element I guess. I have a little demo page where I'm running a video. That file is available in .webm, .mp4 and .ogv. The video is played properly in Firefox (10) mac+win, Safari mac, Chrome mac.
Neither the windows version of Safari nor Chrome plays/shows that video file (maybe a Webkit issue?). This is how the HTML code looks:
<video controls>
<source src="video/chicane.webm" type='video/webm; codecs="vp8, vorbis"'/>
<source src="video/chicane.mp4" type="video/mp4"/>
<source src="video/chicane.ogv" type="video/ogv"/>
</video>
I'm also using a .htaccess file to normalize MIME types, looks like
# Video
AddType video/ogg ogv
AddType video/mp4 mp4 m4v
AddType video/webm webm
Having a look into Chromes or Safaris developer tools (network tab), it looks like it chooses to play the .webm file, but it can't figure the mime type (shows undefined), plus it seems like it trys to access the files twice.
Have a look yourself:
http://www.typeofnan.com ("awesome tab")
I have no clue why it works fine on OSX with both browsers, if someone can spot an error on the site please let me know. At present, I do some feature detection and use Javascript to .play() the video. However, if I use the autoplay attribute on the <video> tag, Chrome at least plays the audio, but still no video at all.
Reference: Site source on github
Here's what I did to get it to work. Since the browser accepts the first video it can play, I put the WEBM version first and Chrome has no problem with it.
Have you tried to add codecs additional info into each <source> ?
Maybe WebKit cannot automatically recognize codec used to encode the video source.
// from html5rocks.com, see link on the bottom of answer
<video>
<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
http://www.html5rocks.com/en/tutorials/video/basics/#toc-markup
It works on my machine : Windows 7 Family + Chrome 16.
What I did is that I opened the Developer Tools.
Then, I added the autoplay="autoplay" to the video tag. Next, I edited the html source tag related to the webm format so that I could have :
<source src="video/chicane.webm" type="video/webm; codecs=\" vp8, vorbis\"">
Maybe it was simply an escape problem (with the double quotes).
I wrote this markup from scratch using your video URLs, and it seems to work fine:
<video controls width="360" height="360">
<source src="http://www.typeofnan.com/video/chicane.mp4" type="video/mp4">
<source src="http://www.typeofnan.com/video/chicane.webm" type="video/webm">
<source src="http://www.typeofnan.com/video/chicane.ogv" type="video/ogg">
<span title="No video playback capabilities, please download the video below">Your video</span>
</video>
<p>
<strong>Download video:</strong> MP4 format | Ogg format | WebM format
</p>
See Video for Everybody.