I have an embedded youtube video in my nw.js app. The preview for the correct video shows up properly but when I click to play it I am met with the following error:
An error occurred, please try again later
All of the videos in the app get this error, except for one that gets this puzzling error:
The following video contains content from the International Basketball Federation
When I click these videos, I can see the first split second of the video before the error shows up.
I tried enabling/disabling the webkit plugin in the manifest:
"webkit": {
"plugin": true
}
and I tried using the Javascript Player API as suggested by in this post. However I still get the same errors.
How can I get these videos to play properly?
Here is the HTML (I'm using angularJS and the video is in a modal window) that displays the video:
<script type="text/ng-template" id="myModalContent.html">
<object width="100%" height="600px" data={{video}}>
</object>
</script>
I also tried copying this example using the Javascript Player API and even tried using the same video as the example but I'm still getting the same error.
Thank you very much for your time. Let me know if you need anything else from me or if I am being unclear.
Ok so the issue was the ffmpegsumo.dll. At first I tried replacing it with the dll from chrome 39 and 42 and that did not fix my issue. After replacing the file with the ffmpegsumo.dll from Chrome 38.0.2125.122, my issue was fixed and videos played as expected.
Chrome 38.0.2125.122 ffmpegsumo.dll 32 bit
Chrome 38.0.2125.122 ffmpegsumo.dll 64 bit
You need the flash plugins in the plugins directory at the same root level as the package.json NPSWF32_13_0_0_214.dlland NPSWF32_14_0_0_125.dll. This with the above will enable Flash.
Had the same problem in Linux 64 bits using Yeoman Node Webkit Generator (https://github.com/Dica-Developer/generator-node-webkit/wiki/Getting-Started)
Just fixed it by adding the so lib:
$ cp nwjs/nwjs-v0.12.0-linux-x64/libffmpegsumo.so dist/Linux64_v0.12.0/
Related
I have a Vue.js website with a PDF file which is included in my ultimate javascript bundle via webpack. (It's my CV.) The following build and delivery process has worked perfectly fine for me since 2017, but suddenly stopped working in iOS 14:
Build the PDF with LaTeX.
Use webpack's url-loader to include the PDF in my webpack bundle as a base64 data URI.
Load that URL into a vuex data store, and then just deliver it as a link when clicked.
For the last three years, this has worked fine: I've been able to click on the link and get a working PDF. It's been kind of random and platform-specific whether the PDF opens in-browser or shows up in a download folder, and whether it gets the filename I've asked it to get or not, but, well, that doesn't matter to me. And the core functionality of click the link and get the PDF has worked on every browser and every platform I've ever tried it on.
All of a sudden, with iOS 14, it's stopped working. Now, when I try to activate the PDF link in iOS Safari, nothing happens at all. When I do it in iOS Chrome, it produces a little popup claiming it downloaded a document, but nothing seems to actually be able to open the document. And when I do it in iOS DuckDuckGo, it just displays the base64 data URI in the address bar.
Interestingly, if I take the dataURI that DDG displays in the address bar and copy and paste it into Safari or Chrome on iOS, it actually displays my pdf. So the browsers still have the capacity to display a PDF from a data URI. It just doesn't want to do so from my link.
And my site still works as expected on the desktop. Including in Safari on the desktop. Also, it still works on my wife's phone (she's still on iOS 13). So this is clearly something Apple changed in iOS 14. But what? And how to get my site working again?
I'm guessing that Apple has changed the behavior of the renderer in iOS in some fashion to cause it to break across browsers but nowhere else (since browsers in iOS are all still required to rely on webkit, right?)
This is a pretty important feature to me. I made this decision deliberately for perceived performance---combined with pre-rendering, everything on my site, including the PDF, loads very close to instantly from the user perspective. So I'd really like to keep it.
I'm using Webpack 2.6.1 and Vue 2.3.3. This is a stable build that has been working flawlessly for three years, so I haven't felt the need to update anything except for security updates.
After searching around, I did find this Apple dev discussion which suggests that in iOS 14, Apple newly blocks redirects to data URIs. But I'm not doing a redirect, I'm actually navigating directly to the URI through a link. And the linked discussion suggests that the newly banned behavior just brings Apple in line with what other browsers already ban---but my code works in every other browser, so that can't be it.
Relevant code, to the extent it matters (though it's so basic and obvious that I doubt a simple code fix will be the answer here):
from my webpack.base.js:
{
test: /\.(pdf)$/,
loader: 'url-loader'
},
from my vuex store, in state.js
import cvURL from './assets/pdf/gowdercv.pdf';
from the component containing the link that points to PDF:
<p><a :href="cvURL" download="gowdercv.pdf"><img src="../../assets/icons/file-pdf.svg" class="cvicon"> Download in PDF</a></p>
which is loaded as a computed property to the component, i.e.,
computed: {
cvURL: function(){return this.$store.state.cvURL;},
Does anyone know how to get functionality back in iOS? Is there a workaround built in recent versions of webpack or vue for this? Thanks!
Update: after some help off SO, an acquaintance turned up this similar problem, which also came up with a solution: turning the base64 URI into a blob and passing that data url. Which also solves my problem. Though that SO doesn't have an accepted answer, so I can't vote to close my own question as a duplicate, alas.
I have the following issue:
I have an iOS Cordova Application.
The application download a zip file and decompress it in "cdvfile://localhost/persistent/content/myfolder" by ussing the following Cordova plugins: org.apache.cordova.file-transfer, org.apache.cordova.file and https://github.com/MobileChromeApps/zip.git
Inside the zip there is an "index.html" file with "video tags" on it.
I was able to succesfully load and execute the "index.html" file, but the video doesn't load.
I know that the video file was decompressed successfully because:
I check the file inside my iPad.
I embed the video in the index of the cordova app (not the downloaded one) in the following way and it works:
var videocontainer = document.getElementsByTagName('video')[0];
var videosource = document.getElementsByTagName('source')[0];
var newmp4 = cordova.file.documentsDirectory + 'content/myfolder/videos/myvideo.mp4';
videosource.setAttribute('src', newmp4);
videocontainer.load();
videocontainer.play();
But, the video is not loaded/played inside the downloaded HTML file. To understand what I'm doing, I have to develop an application that will be updated by downloading its contents from zips, and the contents includes pages with videos embeded on them. It works on PC and Android, but not in iOS.
I tried the following things:
Loading the page in "_self". The page is displayed but not the video.
Loading the page in an iframe. Same result.
Loading the page within an inAppBrowser (plugin). Same result.
Video tag with source src="videos/myvideo.mp4" (works in Web and Android). Same result.
Video tag with source src="./videos/myvideo.mp4" (works in Web and Android). Same result.
Video tag with source src= cordova.file.documentsDirectory + 'content/myfolder/videos/myvideo.mp4' (with JS, by passing the path in a query string, same path that works in the root index.html as I described before). Same result.
Video tag with source src= cordova.file.documentsDirectory + 'cdvfile://localhost/persistent/content/myfolder/videos/myvideo.mp4'. Same result.
All the combination of previous things. Same result....
Loading the downloaded resources in a DIV is not an option, because the resources (images, css, javascripts, audios, videos, etc.) are downloaded on other iOS device's folder: the app's Documents' folder (cdvfile://localhost/persistent/).
I thing I tried almost everything... Why is not trivial to play a video tag, inside an html, that are both in the app's Documents' folder???
:-(
EDIT 1: Cordova Version = 3.6.3
Solution Founded!!
In almost all the android and iOS examples, downloaded content is being executed from "cordova.file.documentsDirectory".
Then, when you link this content in a or (by using AJAX), everything works fine (CSS, images, links) but media tags ( and ).
Again, I dont know why, but almost all the examples downloads and unzip contents by using this path.
After several days being blocked with this issue (I found lots of forums where the devs have to modify all their projects by using plugins like Cordova Media, jaeger25 Html5Video, etc, etc), I tried by using the following path: "cordova.file.dataDirectory"
I download, unzip and execute the HTMLs from this path and everything works with no parsing/modifications to the HTML files (that in my case were thousands). 100% compability with and tags with relative sources' path in an IFRAME!!!!!!
I guess you code the video links into the index.html inside the zip you decompress on the device.
Those links need to get "updated" with some javascript parser, BEFORE you actually load or navigate to this page in your phonegap app.
If your example is caused in Android, you definetly need to include the HTML5 Video plugin here:
https://github.com/jaeger25/Html5Video
On iOS the tag will work for local files. But the links need to be absolute.
And the links will change if you recompile your app or reinstall it.
The files will be available, but the APP ID will have changed and the absolute path also.
Example of an iOS path:
/var/mobile/Applications/<application UUID>/Documents/path/to/file
Hope you solved your problem.
I am appending iv_load_policy=3 to the end of my YouTube URL to remove the annotations on the video, but I find it is not working. Looking on Google, it seems like this issue was addressed a year ago. I am wondering if anyone knows if this bug is back or if there is a work around?
I have tested on Chrome, FF, Safari, and IE9 on Win7.
http://www.youtube.com/watch?v=87kezJTpyMI&hd=1&iv_load_policy=3
https://developers.google.com/youtube/player_parameters#iv_load_policy
You can only use the iv_load_policy when embedding videos using one of the player apis - you can't just change the youtube watch page url.
For example, if you wanted to embed the video you linked above without annotations, you could use this link:
http://www.youtube.com/embed/87kezJTpyMI?hd=1&iv_load_policy=3
Cheers. Wanted to remove the annotations as well from the embedded Youtube video's. Just added &iv_load_policy=3 to the end of the videos URL. Works like a charms :D
Use this in an extension
$("div.video-annotations").css("display", "none");
Or this in Stylebot extension
div.video-annotations {display:none;}
I have noticed specific behavior of FancyBox2 Demo in IE9, maybe someone could tell, what causes the problem or how it could be fixed. I mean youtube link, which uses fancybox-media class. When I open demo by using link 'standalone version' on http://fancyapps.com/fancybox/#examples, youtube link works properly and window with movie opens immediately, but when I clean the browsing history and then open site by pasting http://fancyapps.com/fancybox/demo/ into URL bar, youtube window doesn't open the first time and succeeds the next time. It makes the example source code used in any different site couses the same problem. Maybe explanation is simple but I'm not very familiar with jquery and any tip will be usefull.
I am creating an offline webapp for the iPad 2, which includes video content. When the page first loads, the video displays fine. But when I reload the page, the video's play button becomes broken.
I've gone into Settings > Safari > Advanced > Website Data and, sure enough, the video is in the cache... So the problem seems to be that it is not being retrieved from the cache.
My HTML code snippet:
<html manifest="cache.manifest">
...
<video width="320" height="240" controls="controls">
<source src="videos/movie.mp4" type="video/mp4" />
</video>
My cache.manifest snippet:
CACHE MANIFEST
# Updated 2012-08-22 19:49:00
index.php
...
videos/movie.mp4
For good measure, my .htaccess snippet:
AddType text/cache-manifest .manifest
AddType video/mp4 .mp4
Does anyone have any ideas?
This unfortunately isn't an answer but after now 20 hours continuous searching and testing to resolve the exact same problem i can tell you where i am now.
This appears to be an ipad iOS specific problem where no matter what size the video / sound file is it will not draw on the cached files although they clearly are cached and on first load it plays the file OK.
I have tried making the smallest video possible.
I have looked at wrapping in a native app but that's not an option for delivery reasons.
I have tried forcing a reload of the video .src on page load using javascript.
I have tried all possible variations of the manifest file.
Looked at all the Apple developer docs i can stomach.
After reading hundreds of posts, that never actually complete, i think the answer, other than getting the client to buy Android tablets, is to use the local database to store the video in binary form to be retrieved when needed by the app. Unfortunately i am still searching for examples of this and as yet cant find any with any detail. Local saving of text / numerical data isn't a problem. I just dont know if its possible to store the raw file data and retrieve it in a local database.
Sorry its not what you were after but hope it helps point you in less directions.
An update but not much progress. I decided to use base64 ecoded mp4 and paste the text in a simple xml file. My app would read this xml video data and by using in the video tag SRC. This was about a 4MB string.
SRC="data:video/mp4;base64,AAAAA /...../ AA"
This worked fine in Chrome. When i used it on the Ipad the good points are that i didnt ever get the play button crossed out and it tried to play then flashed a message it could not complete this operation.
I had a somewhat related issue with playing video on an iPad. This was in an HTML widget that will reside in an iBooks file. My problem was I couldn't get the videos to rewind, so when you went back to that screen the video was stuck at the end (or still playing if you went back fast enough.)
The workaround I came up with was to load a different video and then reload the video I wanted to play. It's ugly, but it works, and it may provide a workaround for your problem.
var sources = videoEl.getElementsByTagName('source');
sources[0].src = "assets/TeethMouth_Anim_Part3_03.mp4"; // Load some other video into the source, in my case, a video that I'm playing later in the presentation.
videoEl.load();
sources[0].src = "assets/TeethMouth_Anim_Part1_03.mp4"; // Then reload the video I want to play.
videoEl.load();
Although now I see that this thread is a year old so it's probably not an issue anymore. Still, thought I'd post it.