I have an AngularJS app that presents some sequential videos and if I go to another URL (by using another HTML reference, href) the old controller stays active and both videos still playing. This happens for each new page with the same controller that I've openned, creating multiple video instances.
The controller receives a video SRC and sets it using ng-src.
EDIT
I am getting video element by ID:
var video = document.getElementById("video");
And setting correspondent source when controller is initialized:
if (video) {
video.src = Modernizr.video.ogg ? $scope.mainVideoUrlogv :
Modernizr.video.webm ? $scope.mainVideoUrlwebm :
$scope.mainVideoUrlmp;
$scope.playVideo();
}
HTML
<video id="video" ng-mouseup="pauseOrPlayVideo()">
<source ng-src="{{mainVideoUrlwebm}}" type="video/webm">
<source ng-src="{{mainVideoUrlogv}}" type="video/ogv">
<source ng-src="{{mainVideoUrlmp}}" type="video/mp4">
</video>
The solution was to remove the video Element from the page.
var video = document.getElementById("video");
Mozila documentation about ChildNode.remove() helped to perform remove action.
video.remove(); //javascript way
However, I've realized that it does not work on IE, as you can notice in the last reference.
The solution was to perform this action in jQuery.
$('video').remove(); //jQuery way
It works in the browsers that I have tested, namely Chrome, Firefox Dev Edition and IE9, IE10.
Related
I have a project where I've embedded an html5 video on a view.
I populate the source dynamically using $scope.
The initial video I populate the player with works fine.
At the end of the video, I try to change the src of the video to the next clip, until it ends.
My problem is that the video src does not update and just plays the initial clip.
Here's the html (pretty straight forward):
<video style="width:100%; height:100%; padding:0;" class="embed-responsive embed-responsive-16by9" id="myVideo" controls>
<source ng-src="{{currentVideo}}" type="video/mp4">
</video>
Here's the code that implements the change from the controller:
if (videoId.currentTime >= videoId.duration - 1) {
// $state.go('unit_1');
$scope.currentVideo = myObj.units[1].lessonUrl; //set video
videoId.play();
}
FYI - videoId is the var for the video. It works fine, as I can play(), pause(), get currentTime, etc.
So I know I'm controlling the player and that I'm successfully loading the initial video.
I'm assuming that when the $scope changes the new video URL would, but obviously I'm wrong.
Any ideas?
Thanks!
If you want to change the src on the video's <source> element, you need to call videoId.load(); before videoId.play(); Otherwise just change the src attribute directly on the video element itself - then a load will not required:
<video ng-src="{{currentVideo}}" style="width:100%; height:100%; padding:0;" class="embed-responsive embed-responsive-16by9" id="myVideo" controls>
</video>
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
The page loads without any of the images displaying on IE11 only, but refreshes them accordingly when we resize the browser intermittently (1/3 loads). We cannot replicate this with any of the other browsers. srcset works fine by itself with static content.
Here is a Plunker example of it not working in IE11.
Or quick and easy, the actual img html we're using:
<img data-ng-srcset="{{::image.url}}, {{::image.url2x}}" alt="{{::image.name}}"/>
The images or surrounding divs do not have any transitions, shadows or opacity applied.
The html renders fine with angular passing over and rewriting the srcset attribute correctly. The images just do not appear, only the alt tag. Wondering if this could be a call stack issue due to the intermittence of it, maybe a race condition with Picturefill loading before angular finishes a digest or something.
Cheers in advance!
A work around if you use PictureFill in a loop and in a specific case (not on all images of your application), is calling a function that launch PictureFill directly from HTML, after last item loaded (this is not the best practice but fix the IE11 problem) :
<picture><!-- Your image --></picture>
<span ng-if="$last">
{{ controllerAlias.launchPictureFill() }}
</span>
Came across this as a solution: http://tech.endeepak.com/blog/2014/05/03/waiting-for-angularjs-digest-cycle/
var waitForRenderAndDoSomething = function() {
if($http.pendingRequests.length > 0) {
$timeout(waitForRenderAndDoSomething); // Wait for all templates to be loaded
} else {
$window.picturefill();
}
}
$timeout(waitForRenderAndDoSomething);
The only issue that the blog post describes is here, so if anyone has anything better please let me know:
The $http.pendingRequests supposed to be used for debugging purpose only. If angular team decides to remove this, you can implement the same using http interceptors as suggested in this link.
I have a html5-tag using the scope to set the src:
<video style="max-height:100%; max-width:100%" controls>
<source src="/files/{{item.path}}" type="video/mp4"/>
</video>
If I load this template I get this error:
GET http://localhost:8070/files/%7B%7Bitem.path%7D%7D 404 (Not Found)
Btw. this is not the correct value of item.path. If I set the path manually it works:
<source src="/files/./5315dfea66469e28166e85c6/5315dfea66469e28166e85c6_20143414248143.mp4" type="video/mp4"/>
How can I make this work?
This is an open issue with Angular:
https://github.com/angular/angular.js/issues/1352
ng-src is appropriate here. however, it is confirmed to not work in all browsers and is suspected to be a bug in the browser rather than with Angular.
There is a possible workaround here: HTML5 video element request stay pending forever (on chrome)
I am using angularjs and I read that videoangular is automatically responsive with vg-responsive='true'.
But using this code:
<videogular vg-responsive='true'>
<video class='videoPlayer' controls preload='none' vg-responsive='true'>
<source src='http://www.videogular.com/assets/videos/videogular.mp4' type='video/mp4'>
</video>
</videogular>
the video on the browser is not responsive.
Any idea?
Thank you.
Have you tried with a $scope variable like config.responsive instead of true directly?
I don't remember now, but maybe you can't set a value directly to vg-responsive.
UPDATE
You must specify a theme, this is a required parameter. This worked for me:
<videogular vg-theme="config.theme.url" vg-responsive="true">...</videogular>
You could take a look to the Videogular's reference for more info:
https://github.com/2fdevs/videogular/wiki/Videogular-reference