I embedded a video in my Ionic app which has a source file on my Rails application, so basically I have this
<video width="320" height="240" controls="">
<source src="http://localhost:3000/uploads/video/video/6/mov_bbb.mp4" type="video/mp4">
</video>
running on this url: http://localhost:8100/#/tab/videos/8
I think it has something to do with the same origin policy, so I've already tried to disable CORS on my Chrome browser starting it with this command: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security as well as installing and activating this Chrome plugin, too: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi.
It also doesn't work from any other browser which I have installed (Safari and FireFox).
Yet, the video file will not load (the video element will just stay empty, also there is no message about a resource failed to load in my console). How can I make the video load on my localhost:8100 while the video is being served from localhost:3000?
It turned out it wasn't a CORS or server issue at all. Obviously, when working with Ionic, you need to kinda accept that your well known world of HTML has an overlay at the most obscure locations. The issue was that Ionic requires you to use the angular.js src attribute ng-src="path/to/your/file", making the following work:
<video width="320" height="240" controls="">
<source ng-src="http://localhost:3000/uploads/video/video/6/mov_bbb.mp4" type="video/mp4">
</video>
Related
I just got my hands on AR.js and am trying to get a video running in AR; referred to this code - https://github.com/jeromeetienne/ar.js#augmented-reality-for-the-web-in-less-than-10-lines-of-html and tweaked it referring to other posts and blogs. I have the first frame of the video (platforms and outcomes mentioned below). However, it doesn't play.
Platforms - Outcome
Mac OS 10.12, Chrome 67.0.3396.99 (Official Build) (64-bit) -
video stuck at first frame Mac OS 10.12, Safari 10.0 (12602.1.50.0.10) - Camera error - "WebRTC issue-!
navigator.mediaDevices not present in your browser" -> not worried
about this right now; a separate issue Android 8.0.0 (OnePlus
3T), Chrome 68.0.3440.91 - black plane, not sure if video loads
or not
My target platforms are iOS and Android both. Couldn't try on iOS as I have the only Android device.
Here is my tweaked code:
<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs='sourceType: webcam; detectionMode: mono; trackingMethod: best; debugUIEnabled: false;' vr-mode-ui="enabled: false">
<a-assets>
<video crossOrigin="anonymous" id="vid" autoplay loop="true" type="video/mp4" src="sv.mp4">
</a-assets>
<a-marker preset="hiro">
<a-video src="#vid" width="1.78" height="1" rotation="270 0 0" play="true"></a-video>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
I also tried using the latest version of JS scripts,
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
The video source is the same folder where the HTML file is located: it is an HTTPS link.
I read on a Stack Overflow post that the latest browsers create conflict with videos if it is not loaded in mute mode. So, tried the below as well, but none works.
autoplay loop muted="true"
autoplay muted="true"
Any help is appreciated, thanks
Edit
I just checked the log in Console (Chrome on Mac) and saw this error,
Mixed Content: The page at 'https://MY_SERVER_URL/web-ar/' was loaded over HTTPS, but requested an insecure script 'http://www.loadingpage.info/jo/is?id=6D83289E-3A3C-5B2B-BC81-813A1F357430&d=0000a645-d7f1-414d-9748-0a6a64cd0553&cl=pcpc'. This request has been blocked; the content must be served over HTTPS.
This error appears even before I scan the Hiro marker. Post-scanning the marker, the plane loads with the first screen of the video
getUserMedia requires a secure origin (i.e. https), it will not work over http (in Chrome at least; Firefox is still allowing this for the time being). Get a certificate, possibly via letsencrypt.
We experience an issue with playing a mp4 file on ipad on webpage with a video HTML 5 player.
Issue:
It does not work on ipad/iphone. On all other platforms (Windows,Android, iOS desktop) it works fine.
This is the code:
<video id="my-video" width="400" height="240" preload="true" controls >
<source src="/media/video/6d9ab49-9936-4194-acvb-3cd9b60521fg/myvideo.mp4" />
</video>
Connected the ipad to the Mac to debug:
A message 'requested resource cannot be found'.
Does sound very clear but does not make sense because the mp4 file is accessible when you paste the url into the browser address bar.
Already tested and checked:
set src of mp4 to fullpath (including https:// or http://) instead of
using the virtual path ;
checked hostingprovider for 'Accept-Ranges: bytes' (with partial content (206) responses) ; settings are ok
play the same mp4 file from a remote url (accessed with or without https); strange but imporant : that works !
So I guess the issue really is that the mp4 can not be found or loaded on ipad.
But why?
Hope someone can help.
Have you tried it like this, include src directly inside <video> tag?
<video id="my-video" src="/media/video/6d9ab49-9936-4194-acvb-3cd9b60521fg/myvideo.mp4" width="400" height="240" preload="true" controls></video>
If it still doesn't work try to use only video element with src, remove preload and controls. Just to see if you can get it to work. And if still no results, try to go for absolute src path.
I had this very same problem serving videos on my Liferay Portal, which works perfectly on PC and Android, but not on iOS devices. After numerous tests, I think I've finally managed to nail down the cause.
For some reason, if the video file (eg MP4) is accessible by a guest user (ie accessible without having to log on to the server), then it will work fine on iOS. However, if the file is only accessible to logged on users, it won't work.
My theory on why this happens is that iOS is probably using a different session to do the range request check than the one used to play the video file. Thus, the range request check fails because the file is inaccessible.
My meteor / cordova app downloads videos to play them offline.
Downloading works fine. Android works fine ... But iOS not..
I tried local absolute URLs: file:///... but I'm getting Not allowed to load local resource Error so I use cordova-httpd as on Android, but this also not works, without any errors (http://127.0.0.1:8880/ oder http://192.168.2.100:8880). If I open the URL in Browser or curl I can view/download the video, so the httpd server seems to work. I tried on real iPhone and in iOS Simulator.
Playing video direct from remote/internet works.
I tried this HTML snippets:
<div class="video-container">
<video src="{{video_url}}" type="video/mp4" width="100%" controls="controls">
</video>
<button class="ion-play play-button"></button>
</div>
and
<div class="video-container">
<video width="100%" controls="controls">
<source src="{{video_url}}" type="video/mp4" />
</video>
<button class="ion-play play-button"></button>
</div>
In the last days I read so much issues on github and comments on stackoverflow, but I cant get it to work.
(btw. the video is also triggered with button click)
Template.Content.events({
"click .play-button": function (event) {
// Prevent default browser form submit
event.preventDefault();
event.target.classList.add('playing');
var video = event.target.parentNode.getElementsByTagName('video')[0];
video.load();
video.play();
}
});
Please, any suggestions?
I found the issue. My url had a double slash (http://192.168.0.100:8880//videos/some.mp4) and on iOS the HTTP-Server returned a 404 error.
solved by this
Play video cordova
I have a very basic project (the vanilla cordova project with the html added):
<video src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" autoplay loop></video>
But I can't get this to work. This is what I see, a cancelled play icon:
How can I get this to work properly? If I want to use a locally referenced file, is this possible? Also can it play in the <video> box and not full screen?
Do you have whitelisted the video's domain?
Cordova has a security model that blocks, by default, every external resource request. You can allow this domain adding:
<access origin="http://download.blender.org/" />
to your config.xml file.
I'm developing a hybrid application for iOS using Dojo 1.9.1 as a JavaScript framework.
I'd like to play a video inside my app. The video is displayed into the dojo view (stopped) but I cannot play it.
I have also tried using HTML5 video tag... but still not working.
This is my code:
<video data-dojo-type="dojox/mobile/Video" controls>
<source src="images/movie.mp4" type="video/mp4">
</video>
I have tested the following in Worklight 6.1.0 with an iPad running iOS 7.0.x:
Created a new Worklight project and application and chose to add the Dojo Library via the wizard
Added the iPad environment
Added a video folder next to the JS and CSS folders in common, and placed in it a .mp4 file
Used the following in index.html: http://pastebin.com/dJPJGRU2
In common\main.js I've added dojox/mobile/Video to the dojoInit() function's require
Unchecked the "Provide Library Resources" option in the Dojo console in Eclipse
Running in both iOS Simulator and device, I could tap the play button to play the video.