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)
Related
I have 2 vides hosted on a server.
In Chromium browser (Version 65.0.3325.181) https://server/index.html is loaded.
Using Javascript, 2 video elements are inserted after window.onload and the 1st one is started.
Both inserted like:
let video = document.createElement('video');
video.setAttribute('width', '100%');
video.setAttribute('height', '100%');
video.setAttribute('preload', 'auto');
let source = document.createElement('source');
source.setAttribute('src', <http://server/video/path>);
source.setAttribute('type', 'video/mp4');
video.appendChild(source);
After finish video.on('ended') video element becomes hidden. And next video element becomes visible and started.
Everything works fine:
2 video elements created and hidden.
Immediately 1st video element started and playing ..
On 1st video ended - it becomes hidden
Second video becomes visible and started ... successfully reach its end and becomes hidden again...
then start again from 1st video...
I have following observation.
First video is always playing smootly after initially cached.
Second video is always playing with glitches and freezes of few milliseconds.
I am using Chromium on Raspberry Pi 3.
When first video starts: CPU is like 40-50-60%
Everytime the second video starts: CPU is like 120-220% and with glitches and freezes.
The issue is not video or encoding related, because when i switch places: the new 2th video (which was 1st before) becomes the problematic one. Always the second video!
Why this can be?
Can you give me some clue or direction what it might be?
One possible reason is that the first video is using the Raspberry PI's built in Broadcom HW video decoding, but the second one is having to fall back to SW decoding.
The same affect can be seen on many computers if you play multiple videos and exceed what decoding the platform can handle in HW - a typical approach is to fall back on some form of SW decoding, or perhaps to simply give priority to the first video(s) playing.
There are also restrictions to the codec and frame rates supported on most video cards, although this does not sound like the issue you are seeing as the video sounds like it plays fine when it is the only or the first video.
So I have to use the Flash fallback for Jplayer when the user is using Google Chrome because of the way our audio streaming server is set up (HTML5 just doesn't play nicely with our Streaming Audio Icecast server for some reason, live streams are fine but static mp3s are not). All other browsers are fine!
However, it keeps blocking the player even if the site is selected to always play the flash plugin, and now it's printing this error in the console: "Same-origin plugin content from http://kansaspublicradio.org/widgets/audio-popup/jplayer/Jplayer.swf must have a visible size larger than 6 x 6 pixels, or it will be blocked. Invisible content is always blocked."
What's the best/easiest way to make the Flash player not be invisible?
Jplayer uses HTML elements for the controls. It's not like your typical Flash game or animation or anything, the Flash part is just used to play audio (when HTML5 isn't being uses).
Thanks for any help! I'm also aware that Flash is going away in a few years, hopefully we have a more ideal solution figured out by then.
Open jquery.jplayer.js or jquery.jplayer.min.js and find setAttribute("width". Here you can adjust the width and height of the loaded player. Setting this to something above 6x6 should fix your issue.
Unfortunately the official jPlayer project is no longer maintained and pull requests are ignored, so you'll have to do this manually.
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 have modified this example in order to run it with my own videos.
It does not work for any video.
In particular, it does not start to play if the video has a duration > 5 sec (I mean the complete video file, not a chunk) what just does not seem reasonable at all and I couldn't find out why this happens.
I get INVALID_STATE_ERR: DOM Exception 11 every time I call the method append() and endofstream()
By the way, I tried with a lot of different videos changing parameters and it does not seem to depend on the file size but only on the duration. So that a small part of a video does work.
webkitsourceopen event is fired but not webkitsourceend.
Where could this 'restriction' come from?
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.