I am working on a webpage where i have to include an embedded video.The video is hosted on some other domain.I am able to embed the video and autoplay once the web page is loaded.However i have a requirement where i have to remove the div displaying the video once it is played , and in place of the video i have to now display some text.
The problem is i am able to do autoplay by the autostart variable in the embed tag...but how do i know that the video has ended.The hosting company only provides an embed tag and they donot have any player apis to use.
One way (or rather a workaround) that i feel is to start a eventlistener in the background and see for the total time of the video and when that time is reached remove the content.But the problem is what if the user pauses the video, then also the div would be deleted.
I am new to flash.Are there some standard variables or actions that we can pass as flashvars to a swf file to stop a running player or to know the state of the player (Note we are only getting an embed tag from the video hosting site so we donot own that code and they donot have much documenation to help me out with the code).
Thanks for your help.
If you know that the content is a movie, and thus probably has a linear frame progression, you could use the Flash javascript API. Pseudocode for one possibility:
everyHalfSecond {
currentFrame = movie.TCurrentFrame("/");
totalFrames = movie.TotalFrames();
if (currentFrame + 1 == totalFrames) {
doMovieComplete() // switch out your div
}
}
WRT your undefined object variable, that sounds like standard browser Javascript issues. To resolve that, can use your own browser-specific "getSWF" function (see getFlexApp in this blog entry for an example), or you can use something like swfobject.
Related
I am solving the issue where I would like to add a youtube live stream (via iframe probably or something) to specific pages on my website. Ideally with possibilities to turn it on, force it start on special time etc.
So if there are pages like
www.mypage.com/page1
www.mypage.com/page2WithIframe
www.mypage.com/anotherPageWithIframe
I would like to specify that on pages /page2WithIframe and /anotherPageWithIframe user will see an iframe of youtube live stream in the bottom right corner with possibility to close it (or minimalize it).
I know this could be easily done in website code, but I wonder if there is any possibility how to configure this feature only via GTM (assuming there is GTM which I can control without any limits)
When displaying a Dailymotion (DMCloud) video in an iframe on my page, how can I use JavaScript to interact with video - get current playing time, for example?
Dailymotion have a JS SDK for this (docs), but I can't find how to use the SDK to interact with an existing iframe rather than create a new one.
So, assuming I have something like:
<iframe src="https://api.dmcloud.net/embed/4e5bf73e94a6f629c900461b/4fcbcc1a06361d0dda000267?auth=1571064530-0-6tpgjq7u-30443abdac10acef6cf336eb89412713& id="foo"></iframe>
Using JS, how can I get the current playing time of the video?
it looks like your are mixing DM cloud and Dailymotion.com
The APIs are different and the documentation for the cloud player can be found at https://www.dmcloud.net/doc/api/player-video_player.html
There is a working example at the bottom of the page: http://api.dmcloud.net/static/dmplayer/dmplayer-sdk.html
Anyway, I think you're missing the code you're refering to but I confirm you cannot control or interact with an iframe that wasn't created using the API.
Well it seems possible #Dailymotion, the iframe needs to be loaded with &api=postMessage, then you get a DOM reference to the iframe and do:
iframe.contentWindow.postMessage('play', '*');
And it works.
I need to track how much of an embedded youtube video the user has watched on my site. I need it to fire a tag at 25%, 50%, 75% and 100% of the length of the video. It should work similarly as a scrolling page track.
The only access I have to the site is through Googletag manager, so any solution would have to be through there.
I´ve researched and aparently there are ways to do this using youtube api. I even tried this step-by-step guide: http://www.cardinalpath.com/youtube-video-tracking-with-gtm-and-ua-a-step-by-step-guide/ But it didn´t work.
I guess the problem is that the site uses fancybox the play the video. Here is a pick of the website´s code:
I have no idea where to start.
Please take a look at
Track YouTube Video Playback with jQuery and Google Analytics Events
https://developers.google.com/youtube/js_api_reference
You need to track the current playback time, get the total playing time and then convert it to percentages.
Use the chromeless player and use the youtube js api. See the Playback_status method. I agree with putting a timer. However, there are methods and callbacks available at the js api that I highly recommended for you to use.
You will probably have to use
onStateChange event
getDuration()
getCurrentTime()
and you probably need those inside the onStateChange wrapper or something better.
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}
function onytplayerStateChange(newState) {
alert(ytplayer.getDuration()+ytplayer.getCurrentTime());
}
At the player state change, you may fire your own methods inside.
It's not a working example, but I hope that you get my answer. The modal / popup boxes is not related in getting the data needed. You just need to use the chromeless player and the YT js api working in harmony with your jQuery plugins. There are some jQuery plugins that is an API wrapper for multiple video sharing technologies.
Bower and Google is your friend!
http://bower.io/search/?q=youtube
Another option worth looking into, if YouTube is not your only options, I'm pretty sure both Vimeo and Wistia have these capabilities built in and are very simple to embed
what you can do is when getting the you tube video request the length of the video. Then divide that number accordingly to 25%, 50%, 75% and 100%.
You can attempt this by setting a timer at the same time the video plays and then calling the tag at the different times which were calculated before hand.
Hope this helps!
I'm looking at embedding youtube videos onto a webpage (a Drupal webpage if that helps), but I need to figure out what people will see if their business/workplace/country blocks youtube access.
Does it show 'video no longer available', does it not show anything?, does it add a class or ID to the embedded html to let css, or a scripting language know that there is an error.
I would like to be able to swap the embedded code out for a gif or something else. So users that can't access youtube will not be left with what ever youtube decides to show them.
Any tips would be great.
I tried editing the hosts file to test myself but it wouldn't take for some reason.
Cheers.
EDIT: * first-question *
This can be achieved using javascript.
In your script call a resource that is located on youtube. Since it's javascript running in the client browser, the request will comes from it and not your website.
If the request fail, the client has no access to youtube.
Did I mention that relying on external resources you can't control is bad ?
Is there some method to issue a screen capture(browser window content only) from the browser with javascript or a embedded flash object etc so that a full quality image of the page content be saved or printed or an alternative approach.
I have a web app (asp.net 3.5) with google maps and other ajax operations client side like a custom tile server. I have been trying to implement a way for the user to print good quality captures of the webpage.
I have used the basic Window.Print() but in both IE and FF there many artifacts within the google maps and some items such as the popped up bubble doesnt print. I have experimented with save pdf thru cutepdf(just to post an example here) and the quality thru window.print() is low too.
For example, A screenshot with FireShot addon is perfect and what I want the client to have. however that is FF only and I cant ask the clients to install addons/activex controls on their browsers.
Have a look at this download example zip file(4mb) with:
Example screen shot using FireShot
(example of what I want to achieve
thru a html/JS button with in the
page)
Firefox Window.Print() result
(cutepdf used to save as pdf)
IE Window.Print() result (cutepdf
used to save as pdf)
note in 2,3 the little bubble is not printed even when open.
For now, I have added the function on my site to go fullscreen and guide the user to take a screenshot or call the window.print() function.
I am still looking for a method to print/capture my page.
are there any flash/activex controls that I can include in my page and thru them provide a quality print mechanism?
Thanks again for all the help but I still need more. :)
Thank you in advance.
http://rapidshare.com/files/311849636/Print_examples.zip.html
You'll go to all that work only to find that a simple app like Snagit will do the job. Building a SnagIt Screen Capture Plugin
The only way to reliably provide a high-quality print version of whats on-screen in a rich web application is to use the client-side, say JavaScript, to send the server precise information about the current state (where bubbles are, etc.) and use that to generate an image that mimics the positioning. Convert that image to a PDF or what-have-you, then send to the client for download.
Google also has a Static Maps API that might give you good results. I looked into it myself once, and only didn't go with it since (at the time) there were limitations on how many points they could support in a polyline.
I don't think this is possible. It would be quite a security risk to be able to capture the user's screen through scripting (imagine bad sites capturing screen information).
No there is not, though it would come in quite handy at times for bug reporting etcetera.
You will probably get the best result by creating a separate version of the page as a PDF have that being generated. It's no quick fix by all means, but you'll get superb print quality and total control over everything. The map part will probably be a bit tricky though as you need to get the map as a bitmap on the server somehow, and if it's not in flash on the client I don't know how you'd do that.