edit: condensed question:
How can I create a flash-free continuous music player (one that is uninterrupted as the user navigates the site)
So I want to set up a website with an audio player that behaves in much the same way as that of many flash players on sites such as hypem.com and pitchfork.com, however I want to avoid Flash altogether if possible so I can retain compatibility with Apple mobile devices.
(edit: mind you i am not creating something mobile-specific! just a webpage with an audio-player feature that can be used on an Ipad/Iphone/Ipodtouch)
I've been looking everywhere for info and so far some people have thrown around that Javascript might provide a solution, but all the players I've found use Javascript AND Flash and do not address the continuous play issue.
Take a look at the html5 <audio> tag.
http://www.catswhocode.com/blog/mastering-the-html5-audio-property
Try and keep your SO questions specific. Ask your site layout question in another question.
https://stackoverflow.com/faq
Here is some code that should get you on the right track
First the html audio element supported by all the browsers but in the IE family only IE9
<audio id="test" controls="controls" type="audio/ogg">Your browser doesn't support the audio tag.</audio>
Then the javascript
window.onload=function(){
var pre='';
var arr=['songTitle1','songTitle2','songTitle3'];
var ind=0;
var ele=document.getElementById('test');
ele.src=(ind++)+'.ogg';
ele.play();
//when the song ends start a new one
ele.onended=function(){
ele.src=(ind++)+'.ogg';
//if you are done with all the songs loop back to the beginning.
//Or you could add some code to load more songs from the server
ind=ind==arr.length?0:ind;
ele.play();
}
}
This just takes an array of song titles and plays through them assuming that you have the ogg files in the same directory as the html file. Right now I think ogg is the only format that you can play on all browsers.
Related
The final device I'll be putting this on is an android TV box, but I'm testing on my galaxy s5. Both are having the same issue.
I'm using Full Screen Browser by Klurige, and I originally had some GIF's at the bottom of the page that I wanted to loop, but they ended up being to clunky and big to run efficiently on the TVbox, so I decided to switch over to html5. I've tried with WEBM and MP4, both are doing the same thing.
I have the autoplay and loop attributes in the html5 video as such:
<video id="zach" loop autoplay class="picture"><source src="P-Zach.webm">Error</video>
Neither works be default in the browser. I just see a gray video icon. I can't even click to start it.
I've tried formatting in different ways and everything mentioned on the broken-links.com blog post people keep pointing to. I've tried javascript .play() options. None do anything.
If I add the controls attribute to the video, I can play the video, so I know the video file works, but it still won't loop.
Any help?
Okay, so it looks like it has something to do with android blocking webview from letting javascript control the html5 video.
That, in combination with the lack of native support for loop or autoplay attributes made me ditch fullscreen browser and switch to the only browser I could find that DID support those - Firefox.
I used an app called Ful!screen (or something like that) to remove the notification bar, loaded firefox with the webpage (with html5 playing and looping perfectly) and scrolled down slightly to hide the top bar.
Tada! Fullscreen browser with html5 video instead of GIFs.
Solved my own issue another way.
I am have been playing around with a lot of options. popcorn.js, mediaelement.js, jwplayer and I can not find a combination that works. I'm working on a learning website and I need to display the subtitles of the video below the player. I can get it to work all good when the video is hosted on the server and it has a file link. I was using MediaElement.js because all the videos I need are on YouTube so it needs to stream from there.
I have tried a few different combinations and popcorn was originally going to work. When I started playing with it I found their YouTube streaming no longer works. I've followed their examples but its a no-go. Also with popcorn I couldn't get to work with any other subtitle file other than TTML (even though they support the others) and I need one that can have html inside of it.
My latest endeavor got me using the script from here: http://www.storiesinflight.com/js_videosub/#code
This lets me use .srt which is good, but I can't get it to let me stream YouTube with any other JavaScript players so I'm back to where I started.
I have seen a post about going through one of the transcoding websites and using the .mp4 link, but I don't want to rely on a middleman. If that site shuts down then my site will also be screwed. I doubt YouTube is going anywhere anytime soon.
There's a surefire way to do this and that's to create your subtitles in notepad and then upload them to youtube
Then Go to your Account Settings page in Youtube
Select Playback from the left-hand menu
Select/check 'Always show captions'
You should Check Show automatic captions by speech recognition (when available) to enable automatic captions for videos that don't already have captions provided)
Save! and you're done
No javascript required
I have a problem with the .load(); function on my ipad.
$(this).bind('ended',function() {
$('video').load();
});
It's a simply function for loading the same content after the Video ends.
Any idea why this function does not work on an iPad?
The .load() method loads the video into the tag. The .play() method starts the currently loaded video. One more thing to keep in mind is this, is the video the right format? The tag can load quite a few formats but not every browser can handle every format. iOS browser like iPad/iPhone and even Safari on OSX/Windows can play m3u8 playlists encoded with h264/AAC and mp4 encoded with h264/AAC files but will not play webm, vp8 or avi. So you need to keep all of this in mind when building this type of tag. You might want to look into just building the the player with straight Javascript and supplying multiple tags and then let the browser determine the video it can play. (I did this at a past job and it is a lot easier than you might think) And I believe that with certain browsers you need to reset the 'play pointer' and tell it to start at position 0
jsfiddle [dot] net/nexxuz/XuLCC/15/
(will not let be post link without code)
And I was able to get this working playing multiple videos too (once one ended played another) (Ad video plus content video) also I was able to get a mid roll video working too. (at x seconds into video play another video and then once that video is done resume the first video)
I did a lot of searching for what I thought would be a pretty common question, but I came up with nothing. If there is another thread with a similar topic, please let me know.
Basically, I'm looking for a way to have an .mp3 file play in a website without relying on a flash-based player. I've searched w3 schools and every forum I can think of, but every media player I've found so far has been some sort of proprietary flash player.
Doesn't HTML support some sort of native player? I've found some that rely on Windows Media Player which is close, but I want the player to work on an iPhone and something tells me WMP won't get that done...
PS, as I'm thinking more about this this idea just popped into my head: a javascipt player and inside the <noscript> tag, put a flash player? I'm running a music blog (# http://www.freshoncampus.com) so the less code per post, the better...
Yes you can, with HTML 5.
This is a pretty good explanation of how you might go about doing this.
The caveat is that HTML5 support is not universal, but iOS devices (iphone) have a good start with supporting HTML5.
Edited to add:
From the question, it's hard to discern if you're looking for a way to play multiple mp3's with a nice gui interface, or just use audio as a background.
For the former, you will need to use Javascript to handle controls, and loading of the src element (I'd search for custom built javascript or jquery plugins to handle this).
For the latter, my solution above will work.
Also, background music in a webpage is highly annoying to most users, so caveat emptor.
You could go with something like http://www.schillmania.com/projects/soundmanager2/
which should autodetect the best option to play the sound.
jplayer? Not sure about MP3/OGG thing though...
First, HTML5's “audio” tag.
Second, you can use “embed” tag — it will play with whatever browser plugin is installed (not just WMP).
Not sure what would work in iPhone, though.
(and I might be wrong about exact tag names)
Is there any way to control YouTube EMBED CODE. For example I am using YouTube embed code in my site. Is there any way to control the video like forward, backward, stop etc. with my own buttons.
Is this possible?
Any help will be appreciated.. Thanks in Advance.
Fero
YouTube has a JavaScript and Flash API that you can use to build your own player or control the player programmatically.
The documentation is here: http://code.google.com/apis/youtube/overview.html
There are several examples in the documentation for controlling your own "chromeless" player. This is probably what you want to use if you want your own buttons.
All of the major browser-embedded video player types have ways to do this, but the method is different for all of them.
YouTube uses a Flash player, which poses a special problem: Flash video players have no ability to handle external JavaScript calls other than what is specifically added by the programmer that built the player. That is, if YouTube didn't build their player with support for external scriptability, you can't script it. This isn't a flag -- on/off -- it's that Flash makes you explicitly publish an external scripting API, and you have to know what the calls look like to make the player do what you want. This is unlike, say, QuickTime, Windows Media Player, or the new HTML 5 <video> tag, all of which have documented basic playback control like you're asking about.
It's probably possible to build your own FLV player (or buy one, like the popular JW Player, which does have a JavaScript API) and point it at the actual video file served by YouTube. I don't know if they try to obscure the video file URL, but once you find out what it is, you're golden.