I refer to the demo code for the YouTube iframe demo located at: https://developers.google.com/youtube/youtube_player_demo. This works perfectly on my desktop and my iPhone, but it will not do so on my iPad in the Safari browser. I obtain a black screen instead. I have modified the code to prevent it auto starting (I have a button now for that). I also write event.target.getPlayerState() to a div on the screen so that I can see what is going on. I wish to use to use the iFrame player and to control it using Javascript.
When it starts up I obtain the still frame from the video (as expected) and the red play button. The getPlayerState() is 5 at this time (video cued). As soon as I hit play the player iframe goes black and the getPlayerState() changes to 3 (buffering). That is it, it will just sit there for hours without change.
I get the same black screen when I try the demo located at: https://developers.google.com/youtube/youtube_player_demo.
I have no difficulty playing a video the YouTube website. Also if I go to any video on the Youtube site and get the iframe embed link then I have no difficulty playing this from a web page. This of course does not have a a Javascript interface.
Has anyone any suggestions? What other info should I provide.
Many thanks.
Peter
This has since fixed itself. But now the demo code will not work on Internet Explorer, the on ready is not firing. There are many posts regarding this on Stackoverflow, but all marked closed. I will investigate further and if necessary open a new post.
Related
Important notice - this is happening only on Safari 14.0.3!
After macOS and Safari update (14.0 -> 14.0.3) video stream from the webcam I'm getting using navigator.mediaDevices.getUserMedia shows only black inside <video> for some time and updates to actual video at some point (sometimes not). This is situated inside <template> which I add to DOM using JavaScript.
In short:
<template><video></video></template> (shows black)
<video></video> (shows ok)
JsFiddle with the reproducible demo - https://jsfiddle.net/alex_oliynyk/402ed6wq/54/
Gif with the issue - https://share.getcloudapp.com/2NuElvYl
Also, I can confirm that video is actually playing fine. This is part of the app where I send frames from the video to the backend for processing and I get a successful response. This means that frames are not just black rectangulars but are proper images.
Any idea how to can I make the video appear right away?
Cheers!
UPD: fixed typo in <template>
After a decent amount of back-and-forth, I've found a workaround to make it work.
Basically, when getUserMedia is called I programmatically create a video tag, add a video stream to it, add it to the DOM. Having container div helps a lot to position it in the right spot.
Working demo - https://jsfiddle.net/alex_oliynyk/402ed6wq/95/
Also submitted the bug report for the WebKit team.
Best,
I have been working on a webpage for a little while and came across an issue where this time around googling will not suffice:
I have a VLC embedded player within a page (this works fine) but after a little while the page is supposed to time out with a warning appearing in the center of the page. In internet explorer only, this appears below the VLC player which prevents the user from selecting any options. I have tried using windowless =true and using z-index to adjust the pages however this still occurs.
I have updated all VLC content. Any ideas on what more can be done?
Thanks!
Will try to explain my question with an example:
Home page has a large flowplayer (video) after the header. And the login tab uses bootstrap models which appears on top of the video player onclick with a normal login form.
Everything works fine on all browsers and devices except iphone or ipad.
By doing some google search I have come to a conclusion that apple does not support any html overlapping the video content.
Could not find any discussions on this topic on this site too, so posting this question here hoping that someone can provide an alternative or a way to get this working (overlapping models on video player).
Try to add
wmode="opaque"
to the
<object>
OR
<embed>
tag parameters and see if it helps.
I am embedding a youtube/vimeo video onto my site with an iframe.
<iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...></iframe>
The {$entity->getYouTubeVideoID()} bit is smarty template code syntax. I don't think that is the problem because the video uploads and plays fine in Chrome and IE9 and up. The video also uploads to firefox and safari fine, meaning I can see the video and it's the right one. But when I click the video it does not play in either firefox or safari.
What is interesting is that the other events are triggered. That is, on mouseover the play buttons on the videos change. On the youtube videos, the button in the middle with the play icon starts out as grey and on mouseover turns to red. So the iframe is registering events. But, it won't play on click. I have no idea where to go from here.
The only other event handlers I have on the iframe is this one but I doubt that is messing it up:
$(window).blur(function(){
if($('iframe').is(':focus')){
mySwipe.slide(mySwipe.getPos(), 1000);
}
});
(mySwipe refers to the swipe.js slideshow library)
I had an issue with playback buttons in firefox also. I was using a html5 Doctype, so I added the following after the youtube url
&html5=1
maybe this might help you.
I simply could not get embedded videos to play inside the swipe.js library (or any other touch enabled jquery library). My solution was to extract thumbnail images from vimeo/youtube APIs and use them as placeholders in the slideshow. Then register a click event on the thumbnail that opened the video in a lightbox.
I know this thread is six years old, but I recently had this problem and all of the solutions on the internet did not work. But I figured it out for my site:
If you have a secure site (HTTPS) and you embed a youtube video with the code posted here,
iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...
... Firefox will block it, because that is "Mixed content." HTTP is unsecure, so it is not allowed to show.
Youtube is an HTTPS site, so including that "s" in your URL will allow it to play in Firefox and IE without having to disable security.
Flexslider 2 basically solved it. Swipe.js is wonderful, but with playing youtube/vimeo in a slider Flexslider works better.
I'm working on a band website that has a Flash-based music player always visible. The idea is that the user can listen to the band's song as he is browsing through the site.
This has been working nicely, but in the weekend I started to work on a Greybox-based gallery for the site and ran into a serious issue. When an image is opened into the full Greybox view on top of the flash, the music stops. In fact, you can see through the overlay that the music player disappears completely until the Greybox overlay is closed. After the overlay is closed, you can select and play a track again.
This problem happens at least with newest Chrome and Firefox 5. For some reason, IE8 plays the track on the background fine.
Now, what could be causing this, and more importantly is there anything I can do to fix it? Any help would be most appreciated!
Just a FYI for those who might run into the same issue, Lightbox2 Lite did not have this issue (regular Lightbox did, though) and worked out of the box. This was in Drupal but I'd imagine the same applies elsewhere as well.