If you’re looking to use Angular 2 to Embed your Video into your app then here are some options for you.
You might have seen this before?
|
1 2 3 |
<iframe src="//www.youtube.com/embed/HFc234GSDRs" frameborder="0" allowfullscreen></iframe> |
Haha, well this iframe hopefully will appear in your projects HTML component if your successful. What you need is a directive that takes in a vimeo or a youtube url and converts it into an embedded friendly url and the displays it.
If when the page loads there is no {{video}} because is not ready yet, but when is ready for any reason the iframe is not updated. Some styles can’t be added using binding syntax Not necessarily, but it’s usually not a good idea to bind a function in the view because it gets called every time change detection is run. This can also lead your video to be reloaded continually if the <video> tag recognizes it as change every time.
1. HTML5 video player for Angular 2
Videogular is a framework to develop video apps built on top of Angular. Videogular was created on 2013 for AngularJS and on 2015 we started the port to Angular 2+. Videogular is different from other GREAT video players like (video.js, jwplayer, etc) because is a wrapper over the HTML5 video tag, so you just can add whatever you want. This provides a very powerful, but simple to use solution, for everybody.
2. Angular Easy YouTube Embed
This is an angular 2 component based on youtube player iframe api. This component came out as a result of the open source project Echoes Player – an alternative player for watching and listening to media from youtube.
3. VideoJS Angular 2 Component
VideoJS is a (rightfully) popular media player library that makes it easy to skin and control media files. This library can handle many types of media files like MP4s, MOVs and even YT (with a plugin). Videos have traditionally been a tough element to render consistently across browsers. Given the rather recent support for the HTML 5 video element things have gotten better, but it has always been a little tough to consistently style the player itself.
4. DomSanitizer to Embed YouTube Videos
Before embedding iframes or other potential cross site scripting security flaws, the content has to be sanitised by the DomSanitizer. DomSanitizer will allow Angular to embed the link within the iframe provided by YouTube.
5. Angular 4 Safely Embed a Video
Learn the basics behind Angular v4 (aka Angular2) in this series. We’ll cover the basics including: setup Angular and your first Angular app, two-way data binding, angular Templates, using Angular Components, angular CLI (command line interface), compiling to production, creating custom pipes, integrate Bootstrap (getbootstrap.com) and deploy an Angular app to Heroku.com.
6. ngx-embed-video Angular 2
Get embed code for embedding youtube/vimeo/dailymotion/* video in websites from URL or ID in Angular 2. Currently supports YouTube, Vimeo and Dailymotion. Feel free to make pull request to add others!
7. Building a Spotify App using Angular 2
This is an Angular 2 app that uses the Spotify API to search and list musical artists and albums. It is part of a 12 project course at Eduonix.xom.This is version 1.1 which uses Angular 2 RC6. The “rc4_old” folder contains the original RC4 version from the Youtube course.
8. AngularJS Youtube iFrame Demo
The ng-youtube-embed-iframe lets you embed a YouTube video player on your website and control the player using AngularJs. Using the ng-youtube-embed-iframe functions, you can queue videos for playback; play, pause, or stop those videos, adjust the player volume, or retrieve information about the video being played. You can also add event listeners that will execute in response to certain player events, such as a player state change or a video playback quality change.
9. Angular 2 YouTube Example App
Angular2 youtube light player, using youtube iframe api. Inspired by echoes player. Complatible with latest release of angular 2.x.x. Fetch youtube video data provided video id and apiKey, show sticky youtube bar at the bottom of page and youtube bar has video data with video display and with controllers like play, pause, volume, mute, unmute progressbar.
10. Embed YouTube Videos in Angular2 RC4 and Ionic2 Beta
Since in ng2 there is no sceDelegateProvider anymore, you would have to use the DomSanitizationService of Angular2’s platform-browser module. Above solution is tested and working in iOS 9.3.