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.
Related
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.
A bit of a strange one - I'm working with the YouTube iFrame API for the first time, building a skin for a customers site.
I've followed the code examples provided by Google/YouTube (https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#IFrame_Player_API).
The issue is that when clicking the play button, which calls player.playVideo(), under some circumstances it will play, but mostly, it just appears to refresh the video with no errors logged in the console. The video will fade to black as if it was about to play, but instead it fades back to the video "poster" with the play button.
You can view the entire code here - https://codepen.io/james-morton/pen/BEZGvm
I've tried various different things such as instead of using:
function onYouTubePlayerAPIReady() {
.. I tried this as per other examples to no avail
window.onYouTubePlayerAPIReady = function() {
Again, to be clear, the controls sometimes works, and sometimes it doesnt - same machine, same browser, same video - I've tried other videos and the same result. It's really inconsistent as it sometimes works.
Any ideas?
Edit:
After further debugging using the below:
function onPlayerStateChange(event){
console.log('State Change: ' + event.data);
}
I can see that for when it doesn't load, the player's state has changed from -1 (Unstarted) to 3 (Buffering), and then back to -1 (Unstarted) when clicking the play button.
It turns out the issue appears to be with CodePen - having transferred all of the code to my own environment, it works flawlessly with no playback issues via the controls.
Having reviewed https://css-tricks.com/play-button-youtube-and-vimeo-api/ that use a very similar setup, the problem was easily replicated on CodePen, and comments (all the way back from 2014) describe the issues that I experienced.
Hopefully this will be useful to others that spot this.
This is a strange one! I didn't quite 'solve' it but I have some feedback. On running your code, at first I couldn't get it to play at all (by either the middle 'YT' play button or by the custom play button), but when I used your 'ff' button (when it hadn't yet started to play), there was obvious signs that it had being activated. I changed the z-index in the yt-player from 2 to -2 and then was able to use the middle button to start play. After the initial play, I had no problem using the custom buttoms (pause/play worked fine) - and I refreshed and tried it multiple times, each time with success.
The one big issue is starting the first video play with the custom play button. You could maybe autostart it (perhaps with a delay?) to circumvent having to use the middle button? I did inspect the widths of the buttons (to see if maybe padding / overlap) may be affecting the play button but didn't find anything. I did notice that when I played the video that it was rising slightly from it's initial position so I tweaked the css a tiny bit (only a very slight tweak). Here's my codepen link (It's not that different from yours..) I hope this helps .. if even a bit.
I have been working with the Kurento docs to build a one to one recorded call. This is using the adapter.js library. It is working well, however when the streams are appended to the video elements they are extremely stop start.
By this i mean they will play video as expected for a second or so, freeze for a second and then restart playing again.
I have noticed this before in other webRTC libraries, but not all.
Is there something that I may be doing that is causing this? I believe that this is not due to my computer as it works using native code only (no library). Is this a known issue?
chrome currently has an issue where something like this happens if you do not call play() on the video element and don't have autoplay set.
If you code does not play in Firefox at all that might be it.
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?
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!