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)
Related
I am creating an app using React and Laravel. I want to apply a bg video in my app and also have the code ready. The webpack mix is running successfully. All the components are being displayed except for the video.
I have provided the code snippet below.
import Video from "../../../videos/HomeVideo.mp4";
<HeroContainer id="home">
<HeroBg>
<VideoBg autoPlay loop muted src={Video} type="video/mp4" />
</HeroBg>
<HeroContent>
<HeroP>
Sign up today and receive a 10% discount on your next
service.
</HeroP>
</HeroContent>
</HeroContainer>
Everything is running fine, just the video is not being displayed
Please remove muted from your code.
<VideoBg autoPlay loop src={Video} type="video/mp4" />
Also, try to use a built-in video tag of react.
<video loop autoPlay>
<source
src={Video}
/>
Try to use this snippet to show up your video.
</video>
I am slightly confused by this behaviour of Angular JS.
Angular.js' ng-if will not render an element if the expression evaluates to false, if the documents are anything to go by. I have this piece of code in my html template:
<div ng-if="false">
<img src="{{ imgPath }}" />
<p>This block is not rendered</p>
</div>
// In the controller
$scope.imgPath = "/invalid/image/path";
When this template is rendered, I cannot, as expected, see the img element or the p element on developer tools:
However... when I look at the network tab, there is a request to fetch the image:
I thought that if the element is not rendered, it wouldn't function in any way or form since it doesn't exist... Why does the browser fetch the image in this case?
You can see the working code on plnkr here, you'll have to hit F12 to watch the error on the console.
I know that using ng-src= {{ }} instead of src={{ }} would solve the issue of img src being fetched with unresolved expression before the data is bound, but, this question deals more with why ng-if isn't stopping the request in the first place
It takes AngularJS a small amount of time to process your markup. So, intially when your page loads, the browser does it's thing trying to process the markup. It sees this:
<div ng-if="false">
<img src="{{ imgPath }}" />
<p>This block is not rendered</p>
</div>
But, so far, AngularJS has not been loaded, and the AngularJS directives have no meaning. The browser attempts to load an image located at the literal URL of : {{ imgPath }}, which the URL encoder will translate to %7B%7B%20imgPath%20%7B%7B, which will fail (obviously). Still, AngularJS has not been loaded.
Once AngularJS finally loads, it goes through the DOM and applies the ngIf directive and removes the node.
This is why you want to use ngSrc. This will prevent the image request, since the browser doesn't understand the ng-src directive and won't treat it like a src attribute.
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 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.
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