I'm trying to find a player that actually works with HTML5 and wordpress and yours has come close.
I'm on an Apache server hosted through godaddy.
The link below is the page I'm testing on. In Chrome it auto loads one version while still showing the play button. Upon hitting play, another version starts, thus two playing at once.
In firefox it just won't load at all. the poster frame shows, but video never plays (according to godaddy the ogg/ogv mime type is there.)
In safari it works fine.
http://parkmultimedia.com/test/
Here is the code i'm using -
[video mp4="http://www.parkmultimedia.com/flv/2012-reel.mp4" webm="http://www.parkmultimedia.com/flv/2012-reel.webm" ogg="http://www.parkmultimedia.com/flv/2012-reel.ogg" flv="http://www.parkmultimedia.com/flv/2012-reel.flv" poster="http://www.parkmultimedia.com/flv/webstill.png" preload="true" autoplay="false" width="480" height="272" align="center"]
Any help would be appreciated!
Dan
UPDATE
OK, I've managed to get the above page to work after some tinkering. Chrome, Safari, Firefox all seem to work no. I'm going to have opera and PC friends test IE.
Fix - Set the default video to mp4 and I used this code -
[video flv="http://www.parkmultimedia.com/flv/2012-reel.flv" mp4="http://www.parkmultimedia.com/flv/2012-reel.mp4" poster="http://www.parkmultimedia.com/flv/webstill.png" preload="true" autoplay="false" width="480" height="270"]
Using my iPod (yes pod, not pad) I get the play button with a line through it...though I also get the loading wheel...it just keeps loading.
Also, and I will search for this, but also an issue - in the new and old script I have autoplay set to false, but in Chrome and Safari it does it anyway. Is there an override setting or a way to control by browser?
Lastly, is there a way to center the player and not have it aligned left?
Thanks for any assistance, Dan
Related
I create a App with Ionic which embed the twitch player for streams and clips.
var url = https://player.twitch.tv/?video=v${videoId}&time=${time}&parent=localhost
<iframe [src]='url' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>
On Android its working perfect but in the iOS App the iframe will not be shown and no player is available. Just a white screen.
Does anybody know what the problem can be related to ios?
I have the same issue. Security limitations are the culprit indeed: I opened the Safari console while the iframe was trying to load and saw this error:
Refused to load https://player.twitch.tv/?channel=...&controls=false&parent=localhost&muted=true because it does not appear in the frame-ancestors directive of the Content Security Policy.
Looking at this security header that Twitch returns, it looks like this:
Content-Security-Policy: frame-ancestors http://localhost:* https://localhost:*
However, when using the Ionic WebView, according to its documentation:
iosScheme
<preference name="iosScheme" value="httpsionic" />
Default value is ionic
Configures the Scheme the app uses to load the content.
Values like http, https or file are not valid and will use default value instead.
So your WKWebView will have ionic://locahost as its application URL by default, which doesn't match the http://localhost and https://localhost prefixes specified by Twitch.
I tried using &parent=ionic://localhost in the Twitch iframe URL. The WKWebView doesn't refuse to open the iframe, but Twitch itself freaks out about the special characters in that parameter and refuses to render its player page.
To me it seems that currently, iOS Ionic/Cordova Apps and Twitch iframes are mutually exclusive.
Edit:
I found a bunch of discussions in the Twitch forum talking about this subject (1, 2), but none of them went technically in-depth to the point where a working solution or workaround could be found. Unfortunately, threads are closed after 1 month of inactivity, so I had to open yet another thread in the Twitch forum explaining the technical details from my point of view. I also added a feature request in their user-voice feedback portal. I'm afraid trying to make Twitch realise / accept that they should do something about mobile embeds is all we can do at this point. Here's the link to it:
https://twitch.uservoice.com/forums/310213-developers/suggestions/44682766-make-embeds-work-on-ios-web-based-apps-like-ionic
We use the YouTube embedded player on a hybrid app based on Cordova. The app has a lot of traffic worldwide.
The player displays the message "Please click here to watch this video on YouTube" to some users when they try to play any video under unclearly circumstances.
We do not see a clear pattern, it doesn't seem to depend on the user's country nor the restrictions of the video.
We have seen in the player code (https://www.youtube.com/yts/jsbin/player_ias-vflrnurMS/en_US/base.js) that the message is assigned to a constant called "TOO_MANY_REQUESTS_WITH_LINK" but there is no high volume of requests per user and the quota cannot be configured as in other Google APIs.
We follow the iFrame API reference:
https://developers.google.com/youtube/iframe_api_reference?hl=en
<iframe id="player" src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&cc_load_policy=0&controls=0&disablekb=1&enablejsapi=1&fs=0&iv_load_policy=3&loop=0&modestbranding=1&playsinline=1&rel=0&showinfo=0&wmode=transparent&origin=XXX" frameborder="0"></iframe>
<script type="text/javascript">
var player,
scriptTag = document.createElement('script'),
firstScriptTag = document.getElementsByTagName('script')[0];
scriptTag.src = "https://www.youtube.com/iframe_api";
firstScriptTag.parentNode.insertBefore(scriptTag, firstScriptTag);
function onYouTubeIframeAPIReady() {
var options = JSON.parse('{"autoplay":1,"cc_load_policy":0,"controls":0,"disablekb":1,"enablejsapi":1,"fs":0,"iv_load_policy":3,"loop":0,"modestbranding":1,"playsinline":1,"rel":0,"showinfo":0,"wmode":"transparent","origin":"XXX"}');
if (!options.origin) {
options.origin = location.origin ||
location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '');
}
player = new YTRemoteVPlayer('player', '<%-videoId%>', options);
}
</script>
Does anyone know what may be happening and how to fix it?
Me and my teammates managed to reproduce that behaviour locally.
To reproduce that behaviour, all you need to do is, under the same IP Address, to load the youtube JS multiple times and for different videos. Although I cannot clarify the exact amount of times it must be done (we left some devices aside doing it), the behavior certainly happened.
As an attempt of a workaround for that problem, we accessed the https://web.archive.org/web website and fetched an old YouTube JS script (https://www.youtube.com/iframe_api). We tried to use that old script, but with no success. The message continued to appear =/.
I really do not know if there is much we, developers, can do about it, but wait for an YouTube statement and/or revision of recent changes on their end.
Update
There is an issue opened on Google's issue tracker website:
https://issuetracker.google.com/issues/143091693
Update
It looks like that YouTube have resolved that problem on their end. We'll keep monitoring :)
Update (November 5th 2019)
The problem is happening again.
Update (November 7th 2019)
I have opened a new issue on issuetracker:
- https://issuetracker.google.com/issues/144057800
I don't have a fix for it, but I can add more information about the problem, this way maybe someone can help us with this issue.
I am getting the same error with some users, and like you said there is no a clear pattern. My devices are working properly, but I did some tests with the help of a user of my app that is getting this error. Following the results:
Demo used in my tests: https://developers.google.com/youtube/youtube_player_demo
Test 1 - Open the iframe player api demo on device's browser - WORKED
Test 2 - Open the iframe player api demo into a webview on my app - FAIL
Test 3 - Open the iframe player api demo into a webview on my app using a VPN connection - WORKED
So, it appears to be a combination of APP + IP is blocked. I don't know the reason, and it will be very helpful if someone repeat these tests. I am trying to confirm it with another user, but it's a little hard to find someone willing to help.
UPDATE: a second user tried to use a VPN and it worked to him too.
UPDATE 2: a user with this problem told me that the videos are working properly again now. It appears to be a temporary block by Youtube on server side.
I have a website for people to post photo and apply lipstick to that photo. Everything works perfectly at desktop and android. but when using iphone 6 to test, after I post the photo, it will display error on iphone browsers(both Safari and chrome). if I refreshed that page, the result will come out. Any idea about this weird behaviour? What can cause iphone browsers to fail displaying a webpage?
(I've tried all solution i found, like turn javascript off and on, turn off speech and reset datetime)
Safari(A Problem Occurred with this Webpage so it was Reloaded, after reload the result is shown). Chrome(Aw Snap!)
Usually that error (at least in Safari) happens when the webpage takes a long time to load.
Chrome offers this solution for its browser.
I am developing an app using Appcelerators Titanium. The app consists of a webview. The webview shows i local page, iframe.html, and this iframe's src is pointed to a remote page.
However, this doesn't work out as i expected since it doesn't seem like the remote page can't store cookies when wrapped in an iframe. It works great on desktop and other devices. This seems to be an issue exclusive to iOS. I need the iframe, and i need cookies. What can i do to solve this?
I am trying to make a simple player in HTML5 that will allow the user to select an item from an option list and then play the appropriate sound file. I am targeting Mobile Safari, primarily.
I am trying to emulate this application I built a while ago in Flash:
http://www.finegardening.com/pguide/pronunciation-guide-to-botanical-latin.aspx
The following code I was able to mostly get to work on my local server, but only in Chrome Dev, and it would crash after playing more than one or two clips.
http://jsfiddle.net/smlombardi/7Wg7Y/
Can anyone give me some ideas on how to accomplish this? That is select an item, load the sound file associated with that item, play the file onClick with a button, then discard the file and load another onChange of the list.
try to use this html5 sound library.
http://buzz.jaysalvat.com/
Good Luck.