I'm working on an app and need the ability to add videos from YouTube.
The video tag doesn't show anything. There is no display via iframe either, but there is an error in the console:
(node:15336) electron: Failed to load URL: ( here is the link to the video ) with error: ERR_BLOCKED_BY_RESPONSE
The only workable way I found was via YouTube embed, but it has its own disadvantage.
Firstly, it has no controller of its own and secondly, with frequent updates of the application (Ctrl + R), the RAM gets progressively busier
Related
I've built a website for an e-sports team using React. One of the pages embeds twitch videos. I used the documentation and was able to get the embedded videos to work on localhost. In the beginning I struggled with it, but then I found out that I need to add the "parent" website url in the embed, as per the docs:
<iframe
src="https://player.twitch.tv/?<channel, video, or collection>&parent=streamernews.example.com" // <-- this here
height="<height>"
width="<width>"
allowfullscreen="<allowfullscreen>">
</iframe>
But now that I deployed it on github pages to demo it to the team, I'm getting an error.
"Whoops! This embed is misconfigured.
(Developers: Please check your browser console for more information)"
I'm using react-router with Hash routing so that react router works with GH pages.
This is the offending code:
<iframe class="media_display" title="videoPlayer2" src={"https://player.twitch.tv/?channel=" + twitchStreamers[currentStreamer] + "&parent=merryface.github.io/niwi-website/"} frameborder="0" allowfullscreen="true" />
I have a suspicion that I have an issue with the parent attribute, since this worked perfectly fine before deploying it on GH pages, but after a lot of experimentation, I'm a bit at a loss. could someone please help?
Relevant twitch docs:
https://dev.twitch.tv/docs/embed/video-and-clips/
Website Page with error:
https://merryface.github.io/niwi-website/#/videos
Turns out Hash Router for react-router + trying going back to the basic url of the repo's website sorted the issue
I am working on a web application in Javascript playing several mp4 videos in a row. Everything works fine but on Android using Chrome. The first three videos are playing fine but from the fourth when I call video.play() method I get this error in the console : "Uncaught (in promise) DOMException: Failed to load because no supported source was found."
I am sure that all the video sources (blob) are correct because I can load them all in another tab.
I am generating my video element like this :
generate_video_element = function(src) {
var v = document.createElement('video');
v.src = src
v.type = "video/mp4";
return v;
};
I get this error on Android (Chrome only) when I call :
v.play();
It returns me a promise which is pending forever...
Thanks in advance for your help.
The most likely cause of that error, given the information you provide, is that the particular MP4 file is not supported on the Android device you are using.
MP4 is a 'container' specification for video and audio steams and the videos and audios in the container may use different encodings, so some mp4 files may be supported and others may not on a given device or player.
This answer gives an example of debugging this using tools like ffprobe and looking in particular the the 'profile' (essentially a pre-defined set of options available within the encoding) of the h.264 encoding which is often an issue on mobile devices: https://stackoverflow.com/a/47478676/334402
There's the following issue on Chrome on Android:
Calling video.load() on multiple video's at the same time causes some of the loads to hang.
If you then inspect the video.readyState property, you will find the following:
Properly loaded videos have the value set to 4 HAVE_ENOUGH_DATA
Videos that didn't load properly have their value set to 1 HAVE_METADATA
I'm not sure where exactly the load method is being called in your case (source change, or when calling play, or maybe it's just not being called at all), but you should probably try to have videos be loaded one after another and not in parallel.
The next solution I'm investigating:
Download the blob
Set the video.src and call video.load()
Wait for the video.oncanplaythrough event to start loading the next one
Hopefully, this should avoid the issue while still working on other browsers.
I'm writing a live TV application using Flowplayer 6.0.5.
I'm using the following code:
<div class="player">
<video>
<source type="application/x-mpegurl" src="http://10.10.11.101/response2/index.m3u8?ch=<?php echo $_SESSION['chnId']; ?>&request=playlist&session=<?php echo $sess_id; ?>">
</video>
</div>
var playero = $('.player').flowplayer({
autoplay: true
});
It's working fine during livestream, but when I switch channels or use seek I occasionally (about once in 10 times absolutely randomly) get this error:
When switching channels (same when using seek), I just send the request to server to change the playlist and then use
player.load();
I have searched everywhere but couldn't find why could this be happening.
Any help will be appreaciated, thanks!
Believe it or not, I suspect the issue is your app being mistaken for some Flash adverts provider.
Browsers don't think "Oh FlowPlayer? That one's okay", all they know is an SWF file embedded on the page is constantly loading various unique streams (like rotating a playlist of video adverts? Oh oh).
This now makes your app show same behaviour as those annoying Flash banners.
It is then auto-blocked (like all Flash banner ads are nowadays) until user chooses to enable playback.
I'm confused by seeking though. network activity did not show new requests but yet for you it gets blocked after a while? I tested this FlowPlayer link.
All I know is these things below will avoid auto block...
If the SWF is loaded from same server as .html that embeds, thats fine.
If the SWF is loading videos from same server as itself, thats fine.
If the SWF is loading a single video source, that's fine.
You're likely doing the first thing but it's not possible to do the second one since video is from RTMP server.
For yourself : Can PHP be used here as a "middle man" proxy? Basically for RTMP streaming, point your SWF input URL to the PHP file (so technically its always loading one file) but the PHP should Echo back any changed RTMP stream data (channel or seeked).
Please update your flowplayer version from your flowplayer account page, because there are some fixes made in your version(6.0.5). You can review that fixes.
I'm trying to open a remote video (let's say it's located at http://www.example.com/video.mp4) with the default Android player launched directly from Google Chrome, making use of the brand new intent://.
This is the URI I called through an href tag:
intent://www.example.com/video.mp4#Intent;scheme=file;action=android.intent.action.VIEW;end;
Of course, this URI doesn't work, and Chrome returns error "Unable to perform navigation". I've also tried the same URI omitting scheme=file.
Here's the documentation I've been following: https://developer.chrome.com/multidevice/android/intents
Thanks in advance!
A quick browse of the Gallery App in AOSP shows that it can be launched from a browser. It has a category of BROWSABLE and DEFAULT. This means given the correct intent URL you should be able to launch it.
Obviously specifying a package should work, but that is not flexible, what if there are two gallery apps.
The following Intent scheme url works:
intent://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4#Intent;action=android.intent.action.VIEW;scheme=http;type=video/mp4;end
Note:
scheme = http (it needs to be that or https),
there is a // before the domain, if that is not there the URL is not constructed correctly in the player
action = android.intent.action.VIEW
type = video/mp4 - if this is not in place the video will open in the browser
I have created a demo that works
I'm developing website with a lot of HTML5 and CSS3 features. I'm also using iframe to embed several content on my website. It works fine if I open it using Chrome/Firefox/Safari mobile browser. However, if I share on facebook (post/page) and I opened it up with Facebook application with Facebook Internal Browser, my website is messed up.
Is there any tools or way to debug on Facebook Browser? Thanks.
This is how you can do the debugging yourself. It's painful, but the only way I've come across so far.
tl;dr Get the Facebook App loading a page on your local server so you can iterate quickly. Then print debug statements directly to the page until you figure out what is going on.
Get a link to a page on your local server that you can access on your mobile device (test in mobile safari that it works). See this to find out your local IP address How do you access a website running on localhost from iPhone browser. It will look something like this
http://192.xxx.1.127:3000/facebook-test
Post that link on your Facebook page (you can make it private so your friends aren't all like WTF?)
Click the posted link in the Facebook mobile App and it will open up in Facebook's mobile browser
Since you don't have a console, you basically need to print debug statements directly to the page so it is visible. Put debug statements all over your code. If your problems are primarily related to CSS, then you can iteratively comment out stuff until you've found the issue(s) or print the relevant CSS attributes using JavaScript. Eg something like (using JQuery)
function debug(str){$('body').append("<br>"+str);}
Quite possibly the most painful part. The Facebook browser caches very aggressively. If you are making changes and nothing has happened, it's because the content is cached. You can sometimes resolve this by updating the URLs, eg /facebook-test-1, /facebook-test-2, or adding dummy parameters eg /facebook-test?dummy=1. But if the changes are in external css or js sheets it sometimes will still cache. To 100% clear the cache, delete the Facebook App from your mobile device and reinstall.
The internal browser the Facebook app uses is essentially a uiWebView. Paul Irish has made a simple iOS app that lets you load any URL into a uiWebView which you then can debug using Safari's Developer Tools.
https://github.com/paulirish/iOS-WebView-App
I found a way how to debug it easier. You will need to install the Ghostlab app (You have a 7-day free trial there, however it's totally worth paying for).
In Ghostlab, add the website address (or a localhost address) you want to debug and start the session.
Ghostlab will generate a link for access.
Copy that link and post it on Facebook (as a private post)
Open the link on mobile and that's it! Ghostlab will identify you once you open that link, and will allow you to debug the page.
For debugging, you will have all the same tools as in the Chrome devtools (how cool is that!). For example, you can tweak CSS and see the changes applied live.
If you want to debug a possible error, you can try to catch it and display it.
Put this at the very top of your code:
window.onerror = function (msg, url, lineNo, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
if (string.indexOf(substring) > -1){
alert('Script Error: See Browser Console for Detail');
} else {
var message = [
'Message: ' + msg,
'URL: ' + url,
'Line: ' + lineNo,
'Column: ' + columnNo,
'Error object: ' + JSON.stringify(error)
].join(' - ');
alert(message);
}
}
(Source: MDN)
This will catch and alert your errors.
Share a link on Facebook (privately), or send yourself a message on Facebook Messenger (easier). To break the cache, create a new URL every time, e.g. by appending a random string to the URL.
Follow the link and see if you can find any errors.
With help of ngrok create temporary http & https adress instead of your ordinary localhost:3000(or other port) and you could run your app on any devices. It is super easy to use.
and as it was written above all other useful information you should write somewhere inside div element (in case of React I recommend to put onClick on that div with force update or other function for getting info, sometimes it helps because JS in FB could be executed erlier than your information appears). Keep in mind that alerts are not reliable, sometimes they are blocked
bonus from ngrok that in console you will see which files was
requested and response code (it will replace lack of network tab)
and about iFrame.If you use it on other domain and you rely on cookies - you should know that facebook in-app browser blocks 3rd party cookies
test on Android and iOS separately because technicaly they use different browsers