I have a template whereby I load details into via a JSON file. The content that is loaded in accompanies a video embed. Everything from the JSON files are working great, but the same video appears on every item. Is there a way that I can load individual videos assigned to each JSON file?
Here is the template:
<div class="container" ng-repeat="guide in guides">
<div class="row">
<div class="col-md-12">
<br/>
<p><a ng-href="#/"><span class="glyphicon glyphicon-home"></span> Back to Guide List</a></p>
<h1><span class="glyphicon glyphicon-play-circle"></span> Watch {{ guide.title }}</h1>
<span>{{ guide.info }}</span><br/><br/>
</div>
<div class="col-md-12">
<video video="marvel">
</video><!--This is the bit I'm having an issue with -->
</div>
<div class="col-md-6">
<h3><span class="glyphicon glyphicon-education"></span> Background to {{ guide.title }}</h3>
<span>{{ guide.background }}</span><br/><br/>
</div>
<div class="col-md-6">
<h3><span class="glyphicon glyphicon-save"></span> Downloads for {{ guide.title }}</h3><br/>
<a ng-href="{{ guide.pdf }}" target="_blank"><span class="glyphicon glyphicon-floppy-save"></span> Download Help Guide PDF</a><br/><br/>
<a ng-href="{{ guide.video }}" target="_blank"><span class="glyphicon glyphicon-floppy-save"></span> Download Video</a>
</div>
</div>
</div>
I'm unable to bind any data into the video tag (which is a directive I've built) - so does anyone have any suggestions?
Thanks in advance.
It should help if you reference a different video in each repeat iteration ;-)
<div class="col-md-12">
<video src="{{guide.my_video_uri}}">
</video>
</div>
If src=".." doesn't work, try ng-src="..".
thanks for the suggestion. I have in fact, tried this - the video tag is a little misleading; as it a custom directive called "video".
<video video="{{ guide.video }}">
</video>
this just brings up the error: Cannot GET /%7B%7B%20videoUrl%20%7D%7D
The directive brings in youtube embeds - which I am using for testing purposes first. The intention was to adjust the trustAsResourceUrl to another form of embed afterwards. The directive code is here below (i have changed the tag from video to video-player)
guideApp.directive('videoPlayer', function ($sce) {
'use strict';
return {
restrict: 'E',
scope: { video: '=' },
replace: true,
template: '<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" width="100%" height="100%" src="{{ videoUrl }}" frameborder="0" allowfullscreen></iframe></div>',
link: function (scope) {
scope.$watch('videoPlayer', function (videoLink) {
if (videoLink) {
scope.videoUrl = $sce.trustAsResourceUrl("https://www.youtube.com/embed/" + videoLink);
}
});
}
};
});
Related
I am trying to invoke load() on a video tag.
HTML Code:-
<div [ngClass]="{
'file-upload-grid-row': isGridRowStylingApplied,
'file-upload-grid-column': !isGridRowStylingApplied
}">
<div id="test" class="file-drag-and-drop">
<div class="card">
<div></div>
<div><button type="button" class="btn btn-primary" (click)="drop.showFileSelector()">Browse</button></div>
<div><button type="button" class="btn btn-danger" (click)="onRemove()">Cancel</button></div>
<div></div>
</div>
<div><ngx-dropzone class="custom-drop-zone size" [expandable]="true" (change)="onSelect($event)"
[disableClick]="true"
[multiple]="false" #drop>
<ngx-dropzone-label [hidden]="!showDragAndDropText">{{dragAndDropText}}</ngx-dropzone-label>
<ngx-dropzone-preview *ngFor="let file of allFiles" [removable]="true">
<ngx-dropzone-label>{{ file.name }} ({{ file.type }})</ngx-dropzone-label>
</ngx-dropzone-preview>
<!-- for image preview -->
<img *ngIf="isImageUploaded" [src]="fileURL">
<!-- for video preview -->
<video *ngIf="isVideoUploaded" id="my_video_1" controls><source [id]=fileURL [src]="fileURL"></video>
<!-- for audio preview -->
<audio *ngIf="isAudioUploaded" controls><source [src]="fileURL"></audio>
</ngx-dropzone>
</div>
</div>
<div>
<p class="text">
<ng-content></ng-content>
</p>
</div>
</div>
Component.ts
const myVideo: any = document.getElementById('my_video_1');
if (myVideo){
console.log('came');
myVideo.load();
}
The value of myVideo is always null. Can anyone please tell me what I am doing wrong?
I am using Angular8 and I have used an open-source file component - ngx-dropzone to dropping file.
Using document get element methods in Angular is wrong
Try use ViewChild decorator and you’ll can get html element from the elementRef. And also you need set { static: false } for ViewChild, because your video element has structure directive “*ngFor”. These elements may be available in AfterViewInit function and later
https://angular.io/api/core/ViewChild
I've been working on my portfolio website (www.gerwinweidenaar.com). I'm using videos (youtube, vimeo), images and soundcloud links in my portfolio. The plugin i'm using for the grid is 'Magnific Popup'. By default the plug-in supports images. With some changes to the HTML, and adding code to the JS i've managed to add videos:
$('.video').magnificPopup({
type: 'iframe',
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'<div class="mfp-title">Some caption</div>'+
'</div>'
},
callbacks: {
markupParse: function(template, values, item) {
values.title = item.el.attr('title');
}
}
});
<div class="mix film" href="https://vimeo.com/220228738"
title="The Heavens
<div class="portfolio-wrapper">
<a class="video" href="https://vimeo.com/220228738"><img src="img/agency/portfolio/grid/grid-1.jpg"></a>
<div class="caption">
<div class="caption-text">
<a class="text-title">The Heavens</a>
<span class="text-category">Compositie</span>
</div>
<div class="caption-bg"></div>
</div>
</div>
</div>
Now i'm trying to add SoundCloud links to the portfolio section. The problem is that my code doesn't support the embeded link that soundcloud provides (embeded soundcloud link)
When I copy the SRC code out of the embeded link and put in into the href section it seems to work, but the iframe is the same size as the videos. This results in a big white space under the SoundCloud player.
<div class="mix film" href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/555366285%3Fsecret_token%3Ds-PfrSv&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true" title=" The Opening
<br> Composition: Gerwin Weidenaar"></i> </small>
<div class="portfolio-wrapper">
<a class="video" href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/555366285%3Fsecret_token%3Ds-PfrSv&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"><img src="img/agency/portfolio/grid/grid-1.jpg"></a>
<div class="caption">
<div class="caption-text">
<a class="text-title">The Heavens</a>
<span class="text-category">Compositie</span>
</div>
<div class="caption-bg"></div>
</div>
</div>
</div>
Can anyone help me with removing the white space under the player? I've been trying to fix this problems for days already.. its driving my crazy :'). If you guys need more code to understand the problem, just ask.
I have a text and when I click the text, it will call the .
My code is as follow.
<h5>Posted On: {{postedDate | date}} <a href="" style="float:right" >Table Plans</a></h5>
When I click Table Plans, it should call the div with id "tableImagesSliding".
<div id="tableImagesSliding" class="col-md-4 col-sm-4 col-xs-12">
<div class="inner-box">
<div class="mask-menu">
<ul class="images ">
<li class="display-inline" ng-repeat="tableImage in allTableImages">
<img ng-src="{{tableImage.url}}" width="600" height="400" />
</li>
</ul>
</div>
<ul class="triggers-menu slider-btn">
<li ng-repeat="cnt in tablemapcount"></li>
</ul>
</div>
</div>
How can I do that?
You can use the href attribute of an <a> tag to point to an element on the page with an id by using the hash symbol.
Jump to table plans
<div id="tableImagesSliding">
Table plans div
</div>
For more information on valid uses of href, you can read the MDN page about a#href and about the id attribute
However, It's a bit more involved when using Angular...
Angular's router will get involved, and if it doesn't recognise the route, will (probably - depending on your setup) redirect to the main route.
You can use the $anchorScroll service to get Angular to jump to the div for you.
Your HTML now contains an ng-click, and the controller uses $anchorScroll:
angular.module('so42186303', [])
.controller('so42186303Ctrl', ['$scope', '$location', '$anchorScroll', function($scope, $location, $anchorScroll) {
$scope.showTablePlans = function() {
$location.hash('tableImagesSliding');
$anchorScroll();
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="so42186303">
<div ng-controller="so42186303Ctrl">
<a ng-click="showTablePlans()">Click to jump to table plans</a>
<div style="height: 100vh; margin-top: 20px;">Content to jump past</div>
<div id="tableImagesSliding" style="height: 100vh;">
Table plans
</div>
</div>
</div>
If by call you mean scoll to the position of the div, the answer would be
i have two ng-repeats that i would like to connect together using their unique id. The idea is that you click a movie poster and the corresponding streaming video will come up the screen above using CSS hide/show. This is what i have so far:
<div class="contentContainer" ng-app="webtest">
<div class="" ng-controller="LandingPageController">
<div class="videoContainer" ng-repeat="movie in movies" >
<video width="800" controls>
<source src="{{movie.stream}}" type="video/mp4">
</video>
</div>
<div class="moviesContainer">
<div class="movieCell" ng-repeat="movie in movies">
<a href="#tab{{movie.id}}">
<img class="movieCellImage" src="content/images/moviePosters/{{movie.images.cover}}">
<div class="movieCellImageBackground">
<div class="movieCellTitle">{{movie.title}} {{movie.id}}</div>
</div>
</a>
</div>
</div>
</div>
</div>
If you use Angular, you don't have to/ should use jQuery.
Angular allows you to handle click event with ng-click.
To your <a> add ng-click="select_video(movie.id)" (you can also remove href).
And you controller should look like this:
var app = angular.module('{your-app-id}', []);
app.controller('LandingPageController', function ($scope) {
$scope.selected_id = null;
$scope.movies = (...) /* The array of movies. */
$scope.select_video = function(id) {
$scope.selected_id = id;
};
});
Then, to every .videoContainer > * add ng-if="selected_id == movie.id".
Should work, let me know if it doesn't.
EDIT:
Also reorganize your HTML like this:
<div ng-controller="...">
<div class="videoContainer" ng-repeat="...">
<div ng-if="...">
<!-- <video /> here, and stuff visible only if this video is selected -->
</div>
<!-- Your <a /> -->
</div>
</div>
You don't need 2 loops. Create a reference to selected item, and set it up in the loop like:
<a ng-click="selectedMovie = movie">...</a>
Let then angular do everything for you.
<div ng-controller="LandingPageController">
<video width="800" controls>
<source src="{{selectedMovie.streams[0].url}}" type="video/mp4">
</video>
<div class="newscontainer">{{selectedMovie.id}} CLICKED</div>
<div class="moviesContainer" id="tabs">
<div class="movieCell" ng-repeat="movie in movies">
<a ng-click="selectedMovie = movie">
<img class="movieCellImage" src="content/images/moviePosters/{{movie.images.cover}}">
<div class="movieCellImageBackground">
<div class="movieCellTitle">{{movie.title}} {{movie.id}}</div>
</div>
</a>
</div>
</div>
</div>
EDIT:
Not tested, may not work. If so, try <a ng-click="$parent.selectedMovie = movie">...</a>
I have an Angular app that pulls in many audio files from a database. I'm using audio.js by Anthony Kolber as the HTML5 player, where the associated wrapper and html are generated from the javascript. The problem is the markup is doubling and I can't figure out why. It does so both within or without an ng-repeat and causes a continuous 'undefined' error when setting width to the loading and progress bars.
The javascript is quite long and difficult to paste here. I've created a simplified version of the problem with the code here as well as a live demo here.
The original HTML:
<!-- audio links -->
<div ng-repeat="audio in medias | orderBy: 'track'" my-repeat-directive>
<span><em>{{audio.title}}</em></span>
<audio src="" dynamic-url dynamic-url-src="{{audio.url}}" preload="auto" />
</div>
The rendered HTM:
<div ng-repeat="audio in medias | orderBy: 'track'" my-repeat-directive="" class="ng-scope">
<span><em class="ng-binding">Glass Jungle 1</em></span>
<div class="audiojs loading" classname="audiojs" id="audiojs_wrapper0">
<div class="audiojs " classname="audiojs" id="audiojs_wrapper3">
<audio src="audio_files/Glass_Jungle_sample1.mp3" dynamic-url="" dynamic-url-src="Glass_Jungle_sample1.mp3" preload="auto"></audio>
<div class="play-pause">
<p class="play"></p>
<p class="pause"></p>
<p class="loading"></p>
<p class="error"></p>
</div>
<div class="scrubber">
<div class="progress" style="width: 0%;"></div>
<div class="loaded" style="width: 100%;"></div>
</div>
<div class="time">
<em class="played">00:00</em>/<strong class="duration">01:25</strong>
</div>
<div class="error-message"></div>
</div>
<div class="play-pause">
<p class="play"></p>
<p class="pause"></p>
<p class="loading"></p>
<p class="error"></p>
</div>
<div class="scrubber">
<div class="progress"></div>
<div class="loaded"></div>
</div>
<div class="time">
<em class="played">00:00</em>/<strong class="duration">00:00</strong>
</div>
<div class="error-message"></div>
</div>
I downloaded your code and simplified it a bit and it worked for me:
<!-- audio links -->
<div ng-repeat="audio in medias | orderBy: 'track'">
<span><em>{{audio.title}}</em></span>
<audio src="" dynamic-url dynamic-url-src="{{audio.url}}" preload="auto" />
</div>
<!-- JavaScript -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- angularJS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<!-- AngularJS Scripts -->
<script>
var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope, $rootScope) {
$scope.medias = [{
"track": 1,
"title": "Glass Jungle 1",
"url": "Glass_Jungle_sample1.mp3"
}, {
"track": 2,
"title": "Glass Jungle 2",
"url": "Glass_Jungle_sample2.mp3"
}, {
"track": 3,
"title": "Glass Jungle 3",
"url": "Glass_Jungle_sample3.mp3"
}];
audiojs.events.ready(function() {
var as = audiojs.createAll();
});
});
app.directive('dynamicUrl', function() {
return {
restrict: 'A',
link: function postLink(scope, element, attr) {
element.attr('src', 'audio_files/' + attr.dynamicUrlSrc);
}
};
});
</script>
The rest is the same. I didn't delve too deeply into the whys of why your code was having problems, and it's been a while since I worked with angular, but I think it had to do with myRepeatDirective, which is executed 3 times, once for each audio file. I'm guessing the markup was only duplicated twice because the second time through it encountered the javascript errors to prevent it from executing a third time.