I have downloaded a MP4 video for testing purposes but I am not able to watch it even after adding the crosswalk plugin. This is what I get:
Cannot GET /media/big_buck_bunny.mp4
This is my code, which is running fine for a youtube hosted video:
<div class="card">
<ion-item>
<div class="video-container">
<iframe ng-src="media/big_buck_bunny.mp4" frameborder="0" width="560" height="315"></iframe>
</div>
</ion-item>
</div>
Test video was downloaded from here:
http://www.quirksmode.org/html5/tests/video.html
And this is the tutorial I have followed:
https://www.thepolyglotdeveloper.com/2015/01/embed-video-ios-android-ionicframework-app/
EDIT: It seems I was placing videos in the wrong directory (not sandboxed). Nevertheless, it now complains about broken or corrupt file (message is in spanish so I don't know if translation is correct).
Finally I managed to do it using the "video" tag and tested it on different Android (which seems to be the problematic plattform) and everything works fine:
<video width="100%" autoplay="autoplay" controls style="margin-top: 50px; margin-bottom: 20px;">
<source src="media/sample.mp4" type="video/mp4">
<p>Your browser does not support H.264/MP4.</p>
Related
The video is playing properly on any desktop or laptop, but when on mobile, specifically mobile Safari, the video is not playing. However the video is showing as an element with the correct styling. I have applied the playsInline and dangerouslySetInnerHTML solutions, but cannot get the video to play. The video is also 3.3mb and in the assets folder. Does anyone have any ideas on how to get the video to show and autoplay on mobile?
JSX:
<div
dangerouslySetInnerHTML={{
__html: `
<video
loop
muted={true}
autoPlay
playsInline={true}
id="video"
>
<source autoPlay muted={true} src="${video}" type="video/mp4" />
</video>`,
}}
/>
Solved The Issue!
I checked the original mp4 codecs and it was AAC, H.264. I used HandBrake to decode the mp4 file and took the audio out as well. I am not too sure if the muted function was working correctly, but decoding the file seemed to do the trick.
As per title, I am trying to render a Jinja2 template with an html5 tag using a Flask backend on Google App Engine. It works with no problems of chrome/firefox (windows/android) but no luck on safari for iOS (tested on iphone 7).
<video id="media-video" width="100%" muted controls>
<source src="{{url_for('static', filename = 'test.mp4')}}" type="video/mp4">
Not supported
</video>
I have searched and read about it (e.g.
HTML5 Video tag not working in Safari , iPhone and iPad) but my case seems somehow different ... no errors are displayed but the video does not seem to be loaded (the video is h.264).
Any idea on why?
Are flask/google-app-engine adding complexity to the problem?
Try a different tag structure:
<video id="media-video"
width="100%"
src="{{url_for('static', filename = 'test.mp4')}}"
type="video/mp4"
muted controls
>
</video>
I've been trying to stream a rtmp video on Angular, but for some reason it doesn't work
my code is
<link href="http://vjs.zencdn.net/5.19.2/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="video_rtmp_url" type="rtmp/mp4">
</video>
<script src="http://vjs.zencdn.net/5.19.2/video.js"></script>
The result I get is this:
Obs: I've ran the "npm install --save videojs" command
Obs²: i'm using ruby on rails on the background, there's no direct relation between it and the video player yet, but on the rails views, the exact same code works fine
Obs³: There's no error or something related on the console
Besides that, what are the other options to stream RTMP on Angular?
Thanks!
The HTML5 tag does not support RTMP protocol.
RTMP was originally an Adobe protocol and flash players did support it.
Some HTML5 Javascript based video players, such as video.js that you are using, will support RTMP, but they generally do this by falling back to flash so you must have flash installed and available for it to work in this case.
Am facing a issue with ionic. here, how to load gif image in <image src="icon.gif"> in a html page.
its working in browser but not in mobile or device.
can any one help me.
You only need to put the following HTML tag with the complete URL of your GIF image:
<img ng-src="{{yourGifURL}}" alt="Description" />
Make sure you using the file name as case sensitive like 'loading.gif' or 'Loading.gif'.
And also use the <img src="">
I was having a similar issue.
I'm new in the development of server-side applications. I have a collection in mongodb which stores names of files that store in the root directory /uploads. I have to download them on client side using the angular. But using the ng-src or simple src out of ng-repeat I get a 404 error.
Is there any way to get the client-side access to the directory with the files?
<div class="row jumbotron" ng-repeat="item in items">
<div class="col-sm-1">
<img ng-src="../../../uploads/{{item.logo}}">
</div>
<div class="col-sm-8">
<h4>{{item.name}}</h4>
</div>
<div class="col-sm-2 pull-right">
<button type="button" class="btn btn-lg btn-info" ng-click="showModal($index)">Edit</button>
</div>
</div>
Also tried to provided file through ../ - 404 (Not Found)
<div>
<img src="../../../uploads/38809344bac1a3a77c5d1e0493763849.png">
</div>
The path you provided will go up three folders and then will look for the uploads folder, as each ../ means: Go up one level (relative path notation). If this is not the case, please update the question with a sample of your folder structure. Relative paths start from the current folder in which your HTML file resides on the server.
Another point to keep in mind: If you're using Linux, The privileges of the /uploads folder must allow the application to access it.