I am using youtube embed code to show a video. But the loop option is not working.
How can I make that work?
here is the code I am using
<iframe frameborder="0" height="100%" width="100%"
src="https://www.youtube.com/embed/ejoIgFsmqxA?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1"> </iframe>
If you check Youtube docs you will see that the loop parameter has some limitations:
Note: This parameter has limited support in the AS3 player and in IFrame embeds, which could load either the AS3 or HTML5 player. Currently, the loop parameter only works in the AS3 player when used in conjunction with the playlist parameter. To loop a single video, set the loop parameter value to 1 and set the playlist parameter value to the same video ID already specified in the Player API URL [...]
So, it seems that it could work (not tested) if you add &playlist=ejoIgFsmqxA at the end of the iframe src like this:
<iframe frameborder="0" height="100%" width="100%"
src="https://www.youtube.com/embed/ejoIgFsmqxA?autoplay=1&controls=0&showinfo=0&autohide=1&loop=1&playlist=ejoIgFsmqxA"></iframe>
Related
I'm trying to put videos with react, when I host the page locally I can rewind and fast forward the video, but when I deployed the project on CI Gitlab, I can't rewind or fast forward using the video bar.
I'm using the react-player library
<ReactPlayer url={ video }
playing="false"
controls="true"
/>
I don't know if I'm mising some parameters in this tag.
true" and "false" isn't exactly boolean in JS. I think you meant to type true and false without the quotation marks.
Therefore, to solve your problem, your code should be:
<ReactPlayer url={ video }
playing={false}
controls={true}/>
I want to embed a music as the background music into my blog and let it auto play.
I thought it could be easy, just type the html code.
I have a music hosted on One Drive and I inserted 3 pieces of code into my blog like below:
<iframe src="https://onedrive.live.com/embed?cid=xxxxx&resid=xxx&authkey=xxxxxx" allow="autoplay" width="98" height="120" frameborder="0" scrolling="no"></iframe>
<audio controls="" autoplay="" loop="">
<source src="https://onedrive.live.com/embed?cid=xxxxx&resid=xxxxx&authkey=xxxxx&autoplay=1" type=”audio/mp3″>
</audio>
<embed id="background-audio" src="https://onedrive.live.com/embed?cid=xxxxx&resid=xxxxx&authkey=xxxxx" autostart="1">
iframe and embed tags look same, they look like the music icon on the right side of the screen shot;
audio tag looks like the one on the left side, but disabled.
Could anyone show me how to do it?
Update 1
This is what the Backend looks like:
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>
Bear with me please, because I am a N00b.
I am creating an Ionic app with Firebase and AngularJS.
What I am trying to do is have a map load with the address location drawn from the database. (Being hard-coded is not an option) I can do this as an external link like this:
See Location
and it works, but it opens up to the web page google maps (which isn't practical for an app)
So, I have tried embedding the map in an iframe like this:
<iframe
ng-controller="BrowseCtrl"
width="100%"
height="450px"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxxx" allowfullscreen>
</iframe>
but I can't get it to work. My guess is because the iframe is "outside" of the page and not recognizing the dynamic data. Does anyone know how I can load the address dynamically into an embedded map, or is there a better way to do this using AngularJS? Ideally, I would like to have all the functions available in the app itself, even if this means having to go to a payed service. For now, though, I am trying to simply embed the map.
Thanks in advance!
Update1
I haven't found the fix yet, but I think I found the problem. In the console there is an error saying: "a trusted value is required" and then links to this, docs.angularjs.org/api/ng/service/$sce I will have to read over this and get back
Update 2
I added this to the Controller:
$scope.trustedURL = $sce.trustAsResourceUrl("https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxx");
And changed the html to this:
<iframe
width="100%"
height="450px"
frameborder="0" style="border:0"
ng-src="{{trustedURL}}" allowfullscreen>
</iframe>
This fixed the error "a trusted value is required", but I am still getting the same result - a map with a randomly generated location. It's not recognizing the dynamically loaded data in {{}}. Any thoughts???
Try to use ng-src instead of src
<iframe
ng-controller="BrowseCtrl"
width="100%"
height="450px"
frameborder="0" style="border:0"
ng-src="https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxxx" allowfullscreen>
</iframe>
Use it like this:
<iframe
ng-src="{{ 'https://www.google.com/maps/embed/v1/place?q=' + task.street + ',' + task.city + ',' + task.zip + '&key=xxxxxxxx' }}">
</iframe>
Step 1
HTML Inside html use
[src]=methodToGetURL()
methodToGetURL: a function which return httl url from component file
EXAMPLE- iframe
[src]="methodToGetURL()" allowfullscreen /iframe'
Step 2) component file
Add DomSanitizer:
import {DomSanitizer} from '#angular/platform-browser';
function :
methodToGetURL() `enter code here`{
return this.domSanitizer.bypassSecurityTrustResourceUrl('https:Your URL here');
}
I like to post the video link on my website but that doesnot work
<div ng-repeat="vid in video">
<iframe class="embed-responsive-item" width="250px" height="250px" src="https://www.youtube.com/embed/+{{vid.youtube}}" frameborder="0" allowfullscreen></iframe>
</div>
The above code not working, please help.
You must use the ngSrc attribute as they say in the Angular documentation otherwise your browser tries to fetch the url with "{{vid.youtube}}".
Plus you don't need to add a "+", there isn't any on Youtube urls.
EDIT : I actually had the same problem with iFrames, and I forgot about it : you must tell Angular you "trust" the Url given. Take a look a this post, it's exactly the same problem.