In my Angular app, I want to use a youtube player to play videos, and then add custom external buttons to control playback. I need a directive that can control all aspects of the video, including seek and progress. The most complete directive I have found is youtube-player-embed, but I don't see any options for seek and progress. Is this possible to do?
According to the Youtube API, it is indeed possible to seek and get the player progress. Since the directive youtube-player-embed is just a wrapper over the youtube video player object, then you should be able to use the exact same functions calls to control it.
In the page for advanced examples for youtube-player-embed you can see how they built a player with custom controls, in this case only Play and Pause, but it should be trivial to follow that example and add a Seek button as well.
Good luck!
Related
I am working on a personal YouTube video player project and am looking at cookpete's react-player. Here is the link to the file I am referencing: https://github.com/cookpete/react-player/blob/master/src/demo/App.js.
Here's the actual player as well: https://cookpete.com/react-player/.
I'm trying to figure out how to render the playback rate on the page. cookpete's includes three buttons (1x, 1.5x, 2x) that changes the playback rate displayed, but if you use a YouTube link as the URL and change the speed with the built-in YouTube bar, the speed rendered doesn't change.
Would it be possible to render the current playback rate on the page that updates with the built-in bar? I believe there a function in the YouTube iFrame API (player.getPlaybackRate()), but since I am not using iFrame, how would I integrate this (maybe event.target.getPlaybackRate())? I've also seen some things about React refs but not sure how I'd use here.
Thank you for your time. I am new to React/API calls, so any help is greatly appreciated.
I have a site where I need to show two different videos on it and I need to be able to do some actions with the videogular API.
The thing is that when I share the $API from the view to the controller using vgPlayerReady($API) the method I call to one video is applied in both! For example I want to mute one video but when I call setVolume() with the API returned, both videos get muted.
Is this a known issue?
Is there other way to mute just one video?
The workaround I found to fix this was to setVolume(0) when the video that I want to be muted is ready to be played, and setVolume(1) when the video I want with volume is ready to be played.
The volume property didn't work for me.
I'm building a project with angularJS. I use ui-router for views, and nested views.
So I have a index.html with just the header, the footer and a "general" ui-view where I load asychronously the Home-view, Contacts-view, About-view, etc.
On the "home" page and on the "about" page there are two different Adobe Edge animations.
They work like charm when I load them for the first time, but when I navigate through the website and then I come back to the home or the about page nothing appears.
I've tried loading the edge scripts in different ways
in the index.html head with the script tags
in a angular directive
in the controller
during the routing processes via the resolve option of ui-router
None of this strategies fixed the problem. The animations still play just once.
Finally I decided diving in the js code crafted automatically by Adobe Edge (I'm not a designer, I have no idea on how to create animation with Edge).
I found that Edge create an AdobeEdge object and bind it to the window... then call the animation throught an event handler in a jQuery anonymous function
(function($, Edge, compId){
....
$(window).ready(function() {
Edge.launchComposition(compId);
});
})(jQuery, AdobeEdge, "EDGE-123456");
On the official Adobe documentation (really bad!) there are some methods to call on the AdobeEdge object...
I tryied to insert in the home-controller the following line
$window.AdobeEdge.getComposition("EDGE-123456").getStage().play();
but doesn't work.
After a wasted whole day I'm frustrated, I hate who ho conceived Adobe Edge scripting and overall I need an help to fix it the right way (beofore implementing horrible workaround).
Thank you
Try using playAll(). I imagine this plays all the Symbol timelines at once (it's difficult to know for sure since the documentation is so vague), but I've found it works for my purposes.
$window.AdobeEdge.getComposition("EDGE-123456").getStage().playAll();
I have a silverlight navigation application where I load and initialize a lot of things in the MainPage.aspx loading.
All the Pages (views) are dependent on the loading of that data.
But really often my users add an internet shortcut on their desktop for my application. but the link often points to a specific page like that :
http://myServer/MyApp/default.aspx#/TheView
I want to force the users to go to the "Default" view (and ignore the #/view parameter) when the application Starts up.
Whats the best way I can do that?
I don't think it's a good idea to 'avoid' links. You should construct the application in a way when it's not a problem.
For example you can send a message from your main logic when everything loaded, and until that message you can disable the appropriate UI (while waiting for data). Messenger (or EventAggregator in Prism) is a publisher-subscriber pattern to achive communication between components without reference to each other. If you don't know it yet, take a look at MVVMLight Messenger or Prism EventAggregator
But if the first option is not okay for you, you can play with the Frame control's JournalOwnership property:
http://msdn.microsoft.com/en-us/library/system.windows.controls.frame.journalownership(v=vs.95).aspx
http://msdn.microsoft.com/en-us/library/system.windows.navigation.journalownership(v=vs.95).aspx
OwnsJournal is your value, because it does not integrate with the browser journal and the url stays the original so your users can't bookmark a 'sub page'.
You can also implement your own journal mechanism.
Another :), but pretty ugly option would be if you track the first page load (in OnNavigatedTo Page events for example), and at the very first request you manually navigate to the main page. Or in the App.xaml.cs, when application starts up you forward the page request.
But I recommend the first one.
I'm looking for something similar to the VB6 / .Net Winforms "Browser Control", that let's you show a browser inside your application.
I don't want to just render a page, I want it to be a fully-functional browser, in which people can click links, will run Javascript, etc.
In essence, what I want is an IFrame, only that it runs inside a Flash app, or a Silverlight app.
The ultimate reason for this is that I want to defeat IFrame busters. I'm making a web app that lets you see other sites inside of it, and I'm running into a bunch of sites that have this code:
var t=top.location,w=window.location;if(t!=w) t.replace(w);
(that's from eBay BTW)
which essentially pops the user out of my site and into theirs.
My hope is that by using a "browser control" of some sort, inside a plugin sandbox, "top", will be top for that browser control, and not for my site.
Of course, if you have any other ideas to achieve the same, they'll be more than welcome.
Edit: I've tried the Component One control suggested by Bill, but it didn't work for these purposes, because it's creating an IFrame outside of the SilverLight control, so it executes in the same context as the page hosting Silverlight, which is what I'm trying to avoid.
Northcode SWF Studio allows you to add browser window on the stage in Flash. I personally use SWF Studio as a third party SWF2EXE tool to extend the power of Flash projectors. It's quite stable and powerful. As far as browser control is concerned here is the example you can download and test if it serves your purpose. Check the Browser APT here.
We've not built a component to enable folks to do this but we're open to suggestions here. That being said, easiest solution is an iFrame, but word of caution in that when you overlay an iFrame over the the top of Silverlight we've seen customers experience perf issues as a result (mostly due to alpha transparency of the iframe etc).
This isn't isolated to Silverlight, Flash suffers the same issue as it has to do with browsers and rendering within the given operating system.
HTH.
Scott Barnes / Rich Platforms Product Manager / Microsoft.
I use the HTML control created by Component One. It has the limitation that the Silverlight object in the page should be set to windowless, but otherwise it works very well.
It's an old post but I'll add my tupence answer. I used the DivElements free control for Silverlight link text and it works quite nicely. It just positions the div accurately so that it looks like it's on top.
As for the other such controls, you've got to set the windowless property of the Silverlight container to true.
It works really well for me and I'm able to seemlessly have Google maps and the Acrobat plugin displayed side by side with my Silverlight application.
PS: because the component just adds a <div> to the page, you can't do stuff like having it load dynamically Javascript file like in the <header> tag.
PPS: when setting the HTML code "by hand", be sure to hook up on the DocumentReady or Loaded event before playing with the HTML DOM.
Hope that helps someone.