I need to create site with video which have autoplay and depend on profile which user selected. So in angular i created template popupVideo:
<video id="example_video_1" class="video-js vjs-default-skin"
controls autoplay preload="auto" height="100%" width="100%">
<source ng-repeat="vidObj in fullScreenVideoUrl" src="{{vidObj.url}}" type="{{vidObj.type}}"/>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
Then in controller i have code:
function showPopupVideo() {
$scope.fullScreenVideoUrl = [];
var webm = {};
webm.url = $scope.currentProfile.video_full + ".webm";
webm.type = "video/webm";
$scope.fullScreenVideoUrl.push(webm);
var mp4 = {};
mp4.url = $scope.currentProfile.video_full + ".mp4";
mp4.type = "video/mp4";
$scope.fullScreenVideoUrl.push(mp4);
var ogg = {};
ogg.url = $scope.currentProfile.video_full + ".ogv";
ogg.type = "video/ogg";
$scope.fullScreenVideoUrl.push(ogg);
ngDialog.open({
template: 'scripts/contents/template/popupVideo.html',
className: 'popup-fullscreen',
scope: $scope
});
}
So all work fine in Chrome and IE, window opens video starts and playing.
But in FF all going wrong, when window opened first time, it started to download (according to network monitor) but NO autoplay, also in console i could see:
Specified "type" attribute of "{{vidObj.type}}" is not supported. Load of media resource {{vidObj.url}} failed. localhost:3000
All candidate resources failed to load. Media load paused. localhost:3000
All candidate resources failed to load. Media load paused.
However! If i press play it start playing video!
Then if i close this window and open again, it show in console same text about not supported, BUT now it started to play video and in same time show on it text that "No video with supported format and MIME type found" how is it possible??? It cant find and it playing it in same time...
Probably too late but what you need to do is use ng-src="{{vidObj.url}}" instead of src="{{vidObj.url}}"
Related
I want to display the live footage of an ip camera on a web page built using ReactJS.
I found some solutions on the internet but that provide solutions using the http url. However my camera has a username and password, and I don't know how to embed the username/password into the http url.
I have a functioning rtsp url with the username/password.
I would like to have a video element inside the react app like this:
render() {
return (
<div>
<video
....
/>
</div>
);
}
My functioning rtsp url is like: rtsp://username:password#172.16.3.18:554
Your solution should be set with two parts: a nodejs application that will read the steram from the RTSP and client side a canvas that will get that stream from the nodejs application.
Think of it as a "proxy"
On Server:
Stream = require('node-rtsp-stream')
stream = new Stream({
name: 'name',
streamUrl: 'rtsp://username:password#172.16.3.18:554',
wsPort: 9999,
ffmpegOptions: { // options ffmpeg flags
'-stats': '', // an option with no neccessary value uses a blank string
'-r': 30 // options with required values specify the value after the key
}
})
On Client:
client = new WebSocket('ws://NODEJS_SERVER_IP:9999')
player = new jsmpeg(client, {
canvas: canvas // Canvas should be a canvas DOM element
})
There is a good npm you can use that does that:
https://www.npmjs.com/package/node-rtsp-stream
I think you need a special media player. Have you tried hls.js. You may include the library, then build your own component and pass the link to it so it may play then.
I am currently developing a Meteor React app, which is using the ostrio:files package to store audio files in a collection named Files. In another (regular mongo) collection, I am using the following code in the transform function to "join" the document with the link to the audio file:
transform: function(doc){
let curAudio = doc.audio;
let audioFile = Files.collection.findOne({_id: curAudio.file_id});
if(audioFile){
curAudio.audioLink = Files.link(audioFile);
curAudio.audioLength = audioFile.meta.length;
curAudio.audioSize = audioFile.size;
doc.audio = curAudio;
}
return doc;
}
This seems to work just fine, as the resulting audio.audioLink is something like
http://localhost:3000/cdn/storage/files/8Q7WwEXyJSkNWwFQa/original/8Q7WwEXyJSkNWwFQa.m4a
But when I try to do something like this
<audio controls preload="none" style={{width: "480px"}}>
<source src={track.audioLink} type="audio/mp4"/>
<p>Your browser does not support HTML5 audio.</p>
</audio>
To be able to play the file, everything works until I click the play button of the HTML5 player. Then, chrome outputs to the console, that the server returned 404 when the file was supposed to be loaded. I tested putting the link into the adress bar, here the server response is just
File Not Found :(
Does anyone have an idea how to fix this?
I found the answer:
My local Ubuntu installation was apparently configured to store uploaded files in /tmp, which didn't caus problems until I restarted the system or cleared my temporary files otherwise. Having the server recreate the DB fixed the problem.
I want to display menus which can be image as well as pdf .
I am using ng-pdfviewer to achieve this . My controller code is ::
venueApp.controller('venueController',['$scope',PDFViewerService',function($scope,pdf){
$scope.viewer = pdf.Instance("viewer");
$scope.pageLoaded = function(curPage, totalPages) {
$scope.currentPage = curPage;
$scope.totalPages = totalPages;
};
$scope.nextPage = function() {
$scope.viewer.nextPage();
};
$scope.prevPage = function() {
$scope.viewer.prevPage();
};
}]);
and my html code is ::
<a id="image_{[ menu.id ]}" ng-if="menu.filename.indexOf('.pdf') > -1">
<button ng-click="prevPage()"><</button>
<button ng-click="nextPage()">></button>
<br>
<span>{[currentPage]}/{[totalPages]}</span>
<br>
<pdfviewer src="{[menu.menu_url]}" on-page-load='pageLoaded(page,total)' id="viewer"></pdfviewer>
</a>
I am using {[]} for expression evalutaion because i configured it to . Now in my console , the plugin is outputting the correct messages i guess
Printed in console by this plugin
src attribute changed, new value is https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf
loadPDF https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf
Warning: Deprecated API usage: getDocument is called with pdfDataRangeTransport, passwordCallback or progressCallback argument -- printed by pdf.js
But the pdf is not being painted . My DOM element for the padf viewer tag is ::
<pdfviewer src="https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf" on-page-load="pageLoaded(page,total)" id="viewer" class="ng-isolate-scope"><canvas></canvas></pdfviewer>
I dont understand what is the issue . Maybe it is with the pdf file as chrome also does not display it , instead just downloads it . the link for the sample pdf is ::
https://d1hpn7r5i0azx7.cloudfront.net/uploads/menu/18/ankush.pdf
Also i am posting this question in SO instead of just posting it in the github plugin page because i seriously think it has to do something with the pdf file instead od the plugin .
P.S it is not my CV , just took one from the pool of applicants in our company :P
I have used http://viewerjs.org/ for offline pdf with angular. But here it seems you have online pdf path . So why are you not trying google document viewer ? It is best for online documents.
Please look at following link:
https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf
you need to change url parameter with your path.
Also you can use this link in your website with iframe as following:
<iframe src="http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
I'm uploading a file (video) to a server and need to play it after processing it (there's a webservice to query the processing status).
How can I add a video player (maybe the HTML5 video tag) to a DIV only after the response of this webservice?
Current code to load the video causes unnecessary server request to a non existing url.
Angular filter to allow the url
app.filter("trustUrl", ['$sce', function ($sce) {
return function (recordingUrl) {
return $sce.trustAsResourceUrl(recordingUrl);
};
}]);
HTML
<video src="{{encodedFileUrl | trustUrl}}" controls></video>
You may use Videogular, angular based video player
I am confused. The Youtube Iframe API with the standard example: https://developers.google.com/youtube/iframe_api_reference?hl=de always used to work for my mobile devices and does not work anymore now..
I´ve tried this fiddle: http://jsfiddle.net/77PJB/3/
<div id="player"></div>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '250',
width: '444',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
with the iPad,iPhone and Samsung galaxy nexus. The video does not play.. Did something change?
Thank you
Mobile Considerations
Autoplay and Scripted Playback
The HTML5 element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it's initiated by a user interaction (such as tapping on the player). Here's an excerpt from Apple's documentation:
"Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback."
Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments.
From: https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations
A simple workaround to have a custom looks of the "play" button:
Have an overlay element with pointer-events: none;. pointer-events works on all modern mobile browsers or simply have the video container over the button with opacity: 0.
The autplay function is not allowed for most mobile devices, so if you cut out that it works
I had this same issue too. Worked well on PC but not on phones. After a little research I found out that the video I was trying to play was CopyRighted. Due to this, the video was not playing on phones. Hope this helps someone out
use these player variables
playerVars: {'playsinline':'1', 'theme':'light','color':'white','modestbranding':1,'rel':0},
Only .playVideo() if the browser is not a mobile browser. There are many ways to detect a mobile browser as shown in this answer: Detecting a mobile browser
For example:
if(typeof window.orientation == 'undefined'){
player.playVideo();
};