html5 - seamless audio connection between pages - javascript

Alright,
I've got localStorage doing its thing to keep the audio tag on track between two pages:
http://tablapusher.com/location.php
(click on the black box to see this in action)
... so, how to keep that sudden skip from happening? can this be done? i see beatport's player (html5) successfully making these transitions. i don't want to use iframes, as i am working my way away from that. i would imagine it would have something to do with setting up a buffer of audio for before and after the switch, and matching that up with the playing audio via javascript, no? any help is greatly appreciated!

It looks like for the time being ajax reloads on an element and pushState will do the trick for me. If anyone has a solution for the approach originally mentioned, that would be nifty as well!

Related

<Audio> el added by js skips, but audio added into HTML works just fine

I've been trying to figure this out for a long time, and I don't understand what the issue is.
If I add an <Audio> HTML element on the page itself, the song loads and plays just fine; no skipping.
When I add a new Audio() in js, set the src, and insert it into the HTML, it skips. What is different from it? I've matched them 1:1 with the settings (autoload, etc) and they act differently. Maybe I'm doing something incorrectly?
I'll attach the CodePen. I had some test functions, but even just placing the Audio (when those are commented out) don't work 1:1. Any ideas? Thanks in advance!
https://codepen.io/jrhager84/pen/VwLoXKX
I spend a lot of time for debugging case "why videos with sound can't use autoplay"? And i found that it's stucks on browsers policy.

Video autoloading

I'm running a projet of video galery. My problem is I want to the use the YouTube system so that when I click on a video in the list of the galery it appears in the main space and start playing (exactly what happens in YouTube). How can I do this please ?
Thanks
firstly, get the youtube api and a fetch method to get the videos,
now loop through the data returned and present it in the manner you want it. write a play method that will open a selected video on a play canvas, this is how I think you can implement what you want in bare design thinking. I dont know what technologies you're using, in my free time I'll write an example implementation in vue.js or react.js

Multiple video.js players fail on flash fallback

I have the page http://video-stock.co.uk setup with 4 videos, all using video.js. It works fine with chrome etc which use the html5 implementation, but when I view in ie7/8 and the flash fallback, the big video and the first of the small videos are fine, but the other 2 small videos are black, and have no play button overlay, and are unresponsive to clicking, although a right-click does bring up the flash context menu.
I have next to no knowledge of working with flash to play videos, except the odd embed in Wordpress, and I was glad to find Video.js to sort all that out for me. All I can see in the code is that the correct video files seem to be getting sent into flash, but maybe it is because the flash player (.swf) file is being called more than once? Just a novice guess. Any help gratefully received.
Edit, for completeness I set up a test for flash on the page in chrome etc - if you go to http://video-stock.co.uk/?flashdefault you can view the page with all players in flash. It works fine on chrome, ff and even IE7+8. To get the flash default I have used:
_V_.options.techOrder = ["flash", html5, "links"];
I will change the default to that order if I receive no replies from you helpful lot.
After the edit I went to the site in IE without the flashdefault query var and all four players were working.
The only thing I changed was adding preload="auto" to the small videos, and that seems to have been the fix. Although it could have been getting the flash videos into the cache using the flashdefault that fixed it, until some new videos are added we won't find out. To Moderators, should I accept this answer now or wait till I know for sure?

Creating two HTML5 video elements with the same source not working

I am trying to do a simple thing but so far I have not had any success and I cannot get why it does not work.
I need two (or several, for that matter) HTML5 video elements to play the same video, but it does not work. Here is the code I have been trying: http://jsfiddle.net/4K8DZ/
Any ideas on why is that?
Thanks
Just ran into this problem myself. I worked around it by adding a query param to the source file of the second video element’s source:
video1.setAttribute("src", "whatever.mp4");
video2.setAttribute("src", "whatever.mp4?random=1");
http://jsfiddle.net/br2bn/
Though I am still not able to just comment, I have to submit this as an answer.
This bug continuous for files > 10mb as long as one of them is buffering, the other one wont work. If you press pause, the other one will work.
I updated the example to demonstarate the bug: http://jsfiddle.net/4K8DZ/23/
Actually, I can play only one video with iPad + Safari and Chrome on Windows7.
With Safari, if I start one video, then another stops.
With Chrome, I got almost the same result.

Is it possible to play a quick chime in website without a plugin (no Flash or Quicktime)?

I have a single page web app that shows real time data using just HTML/CSS/JS - I have managed to keep Flash out of it.
Now I want to play a small chime but I don't want to make the site dependent on Flash. It is just a chime to indicate a new chat, so it is not a huge stumbling block but I would like to find a way.
Is this possible - I am guessing no since you need something local to play the sound, but I am hoping here!
Thanks in advance for any help!
Edit: I am not able to use HTML5 quite yet.
Check out the HTML5 audio framework buzz or MediaElement.JS
Playing .wav files embedded in html? Try Different ways to play sound from a website - UCL
Example two of this web page shows a good example. An easier version of this example would be this...
function playSound(soundfile) {
document.getElementById("sound_element").innerHTML=
"<embed src='"+soundfile+"' hidden=true autostart=true loop=false/>";
}
The HTML would be this...
<span id="sound_element"></span>
This puts a hidden embedded file in the web page. You can call this function by doing playSound(Path/To/File)

Categories