I want to create a videoplayer in a browser, and be able to switch the source of the video.
All the video's are stored on the computer.
I am trying to use VideoJS, an i got it working for 1 video, but i cannot get it to switch to a different video.
I would like to open an video from a location, for instance using:
<input type="file" id="files">
This would be the source for the player.
The source of the videojs is as follows, where i cannot use a variable.
<source src="video/example.mp4" type='video/mp4'>
Anybody an idea?
I am fairly new to HTML5 and Javascript, and i don't know which termonolgy to use to find the answers.
First you get the instance of your player and then you set a new source (or new sources) via the Player.src function:
var player = videojs('my-player');
player.src({ type: "video/mp4", src: "http://www.example.com/path/to/video.mp4" });
For more detailed information, have a look at the documentation of Player.src.
Related
I am trying to load a PDF file as an image into a SVG within D3.js, and using React. I have managed to use react-pdf to load the pdf file as a dom element. Through the network tab, I see that 'pdf.worker.js' has generated a blob as a jpeg image at a URL (possibly using createObjectURL). I want to access this jpeg image, but I don't know how to, and I haven't found an answer.
https://imgur.com/PuSSJqC
Can anyone help me please?
I tried getting accessing the canvas element directly from the DOM and using importPDFCanvas.toDataURL(), but this image is blank.
onDocumentLoadSuccess = () => {
const importPDFCanvas: HTMLCanvasElement = document.querySelector('.import-pdf-page canvas');
const pdfAsImageSrc = importPDFCanvas.toDataURL();
};
<Document file={importPDF.pdfSrc}>
<Page
className="import-pdf-page"
onLoadSuccess={this.onDocumentLoadSuccess}
pageNumber={1}
/>
</Document>;
I expect there to be a way to access this image or the URL through the pdf.js api, but have no idea how to get it. Sorry if this seems like a newbie question, would appreciate any guidance on where to look or what to look for!
Edit:
Solution was just to use onRenderSuccess instead of onLoadSuccess.
I am using nervgh/angular-file-upload to let the user take a photo from his mobile phone camera and upload it. It works fine, but now I want to display the image too. Of course I could add that functionality to my backend and just use the img-tag and point it to the URL. But since I upload the my JavaScript file already has to have the file at some point, right?
How do i display it?
I tried it like this:
<img ng-src="data:image/JPEG,{{uploadedImage}}">
but couldn't get it to work. According to the wiki of angular-file-upload I have control over an "FileItem", but I can't seem to figure out where the actual file-date is stored.
So my question is: Is it possible to use img tag with ng-src to display a file that is directly stored in JavaScript as byte array and where does angular-file-upload store the actual array-data
You need to make use of ngf-thumbnail option
<div|span|...
*ngf-thumbnail="file" //Generates a thumbnail version of the image file
ngf-size="{width: 20, height: 20, quality: 0.9}" the image will be resized to this size
// if not specified will be resized to this element`s client width and height.
ngf-as-background="boolean" //if true it will set the background image style instead of src attribute.
>
Take a look at this fiddle Click Here
<img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb">
This line is helping us to show a thumbnail of the image being uploaded by the user, you can choose different html tags as suggested above. You have to link the image using the file name, the ng-model in that case is picFile and that is being used as ngf-thumbnail.
You can use your own css on it as well.
you could use fileReader.
bind the ngModel file then convertit to base64 and use it as the image source
var reader = new FileReader();
reader.readAsDataURL(scope.ngModel);
reader.onload = function(readerResult) {
$scope.$apply(function(){
$scope.mysrc = reader.result;
});
};
I just started learning AngularJS and am facing an issue with audio playing. Here is part of my controller's code :
$scope.preview=function(id){
searchRequest.getSound(id).get().then(function(response){
var audio = $("#player");
$scope.link=response.data.preview;
audio[0].pause();
audio[0].load();
audio[0].oncanplaythrough = audio[0].play();
});
}
And HTML :
<audio controls id="player">
<source ng-src='{{link | trustUrl}}' type="audio/mp3">
</audio>
It is actually supposed to set the new song's url every time I click on a different item and play it (I am not sure designing it the right way according to Angular, as I told you I just began). When I click for the first time on a song, the data binding has been well done and the source url has been modified but the song doesn't get played. Then when I choose another item, it still sets the right url to the source but plays the previous one every time. Basically I need to click 2 times on a song to make it read.
Do you know how I could fix it ?
Thank you
$scope.preview=function(id){
searchRequest.getSound(id).get().then(function(response){
var audio = $("#player");
$scope.link=response.data.preview;
audio[0].src = response.data.preview;
audio[0].pause();
audio[0].load();
audio[0].oncanplaythrough = audio[0].play();
});
}
should work as expected
I want to show PDFs in my angular application. It should be possible to show multiple pages at once and to search inside the PDF.
I tried angularjs-pdf to do so, but it lacks these features. Is there a angular wrapper for pdf.js that can do this? Or can somebody get me startet on how to implement pdf.js in my angular application without a wrapper?
Assuming this statement:
"I want to show PDFs in my angular application"
Anyone searching for this, could ought to check out ng2-pdf-viewer, for more information on this module, can check this out ng2-pdf-viewer PdfShowcase
Basically, this module could somewhat allow one to display more than one PDF in a single screen.
app.component.ts
// Declare the pdf as an empty array
pdfs = [];
// Assuming requesting PDFs from server through MVC style
getPdfs(){
this.getPdfService.getPdfs().subscribe(response => {
response.body.forEach((value, index) => {
this.pdfs.push({
id: index,
obj: window.URL.createObjectURL(value);
});
});
});
}
app.component.html
<div *ngFor="let pdf of pdfs, index as i;">
<div *ngIf="pdf[i]">
<pdf-viewer
[rotation]="0"
[original-size]="true"
[show-all]="true"
[fit-to-page]="true"
[zoom]="0"
[zoom-scale]="'page-width'"
[stick-to-page]="true"
[render-text]="false"
[external-link-target]="'blank'"
[autoresize]="true"
[show-borders]="true"
[src]="pdf.obj"
(after-load-complete)="onPdfComplete($event)"
(error)="onPdfError($event)"
style="width: 100%; height: 800px;">
</pdf-viewer>
</div>
</div>
If this library is not suitable for your use case, you may try with other libraries which uses iframe or similar strategy. Refer here is a useful source worth checking it out.
I know I'm a little bit late for this post but thought of posting here might help some folks who is looking for the same thing. Hope it helps.
From ng2-pdf viewer page, it recommends your desire "angular wrapper for pdf.js", There are a ton of built in functionality Mozilla's viewer supports; such as print, download, bookmark, fullscreen, open file, zoom, search,......
If you need to display multiple PDF files simultaneously and if you don't mind using iFrames, I recommend ng2-pdfjs-viewer. https://www.npmjs.com/package/ng2-pdfjs-viewer
Implementing EasyCaptions on my WordPress blog and I’ve hit a brick wall. Any help would be appreciated. I’m using SWFobject to embed videos. I’ve pasted this code: http://pastebin.com/0ZMSr0Bz into my header.php and this embed code in my posts:
<video id="video-html5" width="480" height="320" controls="controls"
source src="[url to video]" />
</video>
The problem is the implementation only works for the video defined here:
var flashvars = { file:'[video url]', ...
All other videos embeds do not work. I've tried using a playlist but that did not solve the problem. How do I solve this? Do I need additional JS or PHP code to add to the file parameter?
[edited post]
I just re-read your question and looked at the pastebin. The video URL you're using is an HTML file: http://vidbull.com/embed-iqkhawkkx1rn-640x318.html. You can't load an HTML file as a video.
Try it again using a proper video URL (MP4, F4V, OGG, etc).
-- UPDATED based on comment from OP --
The issue is that you're hard-coding the video URL in your WordPress header. What you'll need to do is use a variable instead. I suggest using WordPress' "shortcode" API, which will enable you to pass variables via a custom shortcode.
Define your shortcode in WordPress, something like:
//[easycaptions]
function embed_easycaptions( $atts ){
//your custom PHP code here, using the passed $atts
}
add_shortcode( 'easycaptions', 'embed_easycaptions' );
Then when authoring your WordPress blog post, you add the custom shortcode where desired, such as
[easycaptions url='http://localhost/wordpress1/wp-content/uploads/2012/10/Sheldon-in-a-Dress.mp4']
Check out the Shortcode API page for instructions and examples. It's a pretty powerful system.
The solution lies in NOT hard-cording the video url in the header.php. Here is what worked to solve this. I first created a custom field in wordpress, named it thinema, and then set the value of the custom field to be the embedded video url in the post. Then edited this code into my header.php
flashvars = { file: '<?php echo get_post_meta(get_the_ID(), thinema, true); ?>'...
I've updated the code in pastebin. Hope this is of use to someone! You can view the implementation here.