I use swfobject to load a youtube embedded video, it works nice, but when i try to load another youtube video after a specific time it doesn't work, It looks like the container div is totally replaced with the swf instead of putting it inside it.
Note: i attempt using swfobject.embedSWF(path,divID,width,height) to load other videos which doesn't work.
Any ideas?
SWFObject v2.x replaces the target HTML element with an <object>.
If you want to use the same target element for multiple SWF embeds, you'll need to re-create the target element before attempting your subsequent embed. Here's a link to a tutorial for this topic (scroll down to "Replacing a loaded SWF with another SWF").
I know this is an older post, but just thought I'd mention that I ended up just using the YouTube javascript API to switch the video. Simpler, and the transition looks cleaner than trying to remove the object and add another one.
Related
is there a way to track user's activity on a video embedded using iFrame tag?
the metadata am most interested in is current Duration, title, src...
ps: YouTube Player API did not work for me :(
if it's for youtube as the tag suggest I'd consider using youtube iFrame API
as suggested in this post you could use player.playerInfo.currentTime using that API.
now if it's just a <video> in html, you can use the currentTime property you could also find the video element in your youtube iFrame and use that same property, it's gonna work. Basically as long as there is a video html element, you'll have access to this property
I have tried several methods:
I tried to create hidden video tags and show/hide them, but this will cause flickering.
I tried to change the src attribute of the video, but I have to call load() method before play(), and the load() will load the new video.
This is not what I want either, because this causes the new video to stop for a while (because need time to load).
I tried to cache the new video by using ajax to load the new video in background before the previous video is finished. The new video can be downloaded completely (300Kbytes) before the old video is finished.
But when I call .load() function on the new video, it will be downloaded again.
My question is: for my third method, is there a way for the video object to make use of the downloaded file in cache?
After reading around, I think the above three are probably the only ways to realize my objective. The third one is really what I want but the video file just got downloaded twice (once is Ajax download, and another is calling load()). Note that, without calling load(), just simply changing the src attribute and calling play() will not work.
Media Source Extensions are what you need. It's hard to find good documentation on them yet (at the time of writing, MDN's documentation is mostly stubs), but you can delve into the spec if you dare.
The two-sentence summary is that with Media Source Extensions you can create a MediaSource object and set it as the source of a <video> element, instead of pointing the <video> at the URL of a complete video. Then you can use JavaScript to explicitly download videos representing further segments of your live stream and append them to your MediaSource object, and the segments will play seamlessly.
Also, while it's slightly beyond the scope of what you've asked here, MPEG-DASH is a technique for doing exactly what you're interested in (i.e. streaming live video by encoding short segments as individual files, such as short standalone mp4s, and serving these segments individually to the browser). There's no way to implement MPEG-DASH in a browser without Media Source Extensions, so they are often discussed together. There are some good writeups (at different levels of detail) on building a DASH player with HTML and JavaScript using Media Source Extensions on the BBC's tech blog and MSDN.
Unfortunately, Media Source Extensions are not yet available in all major browsers. For instance, the latest version of Firefox on my Mac doesn't have window.MediaSource. This means you can't do segmented live streaming in a way that will work on all major browsers using only a HTML 5 <video> element yet. Unfortunately, it's still necessary to fall back to Flash if you need cross-browser compatibility.
Like you, I tried to implement this behaviour without using Media Source Extensions. I tried (and tried combining) a whole bunch of techniques, including swapping out URLs on <video> elements, unhiding and playing <video> elements, downloading segments fully in advance and storing them in Blobs that I'd use as the src for my <video> elements, and setting the preload attribute to auto to load the segments into memory in advance... but nothing worked. In Google Chrome, using any of these techniques results in a visible stutter when you play() the second video from the first video's ended event, even if you've loaded the second video fully in advance. There just isn't a way to get seamless consecutive video playback using <video> elements without some kind of stutter in browsers that don't support Media Source Extensions.
I have more than 15 thumbnail images displayed(fetched from DB and looped) on the webpage. Onclick of an image, I have an overlay which plays the youtube video(iframe version).
The problem is that, on closing the overlay, the youtube video continues to play.
After going through the YT documentation, I figured out that there is no way to control the YTplayer inside an iframe. But, I have to use an iframe because embed and object tags make use of flash and flash is not supported in Mac(Mountain Lion)
So, I was thinking, if there is a way to deactivate iframe then the player may stop. display:none; does not help.
Please suggest.
Thanks in advance.
I tried this method and it works:
I fetch the iframe source by id using javascript and make the source blank.
<script>
function stopVideo(){
document.getElementById("iframeID").src= "";
}
</script>
I am using JavaScript to wrap an HTML5 video player in a div for styling purposes. If the mark-up exists when the page loads, the player functions as it should. However if I apply the wrapper dynamically with JavaScript, the player goes black and its controls are inaccessible. I have tested applying various elements as wrappers, and it seems to happen with any block level element, but not inline elements. I can't find any documentation on this bug or others who have encountered it via Google. Anyone have a workaround?
I see this was posted a long time ago & I ran into a similar issue.
When a video is reparented (like it would be if you used a solution like slick, it reverts to 00:00 and pauses. Once reparented, you should be able to directly access the video via JS & invoke the play() method to get it started again.
I got the Media Element JS player to work, but when I tried to get it to play in a pop-up, I noticed that it breaks the popup. It looks like I can't call JavaScript inside a JavaScript. My popup is pretty simple, it just does window.open and uses document.write with code to build a new page with its own style sheet. However, I can't load the mediaelement.js stuff inside that. Maybe I should just load the Flash that comes with it? There's also a silverlight file.
Can someone please help? I need a player that doesn't require an XML file for the playlist, works in all browsers, plays MP3s and has a timer on it. I've been working on it all day to no avail!
if you're document.writing into a new window you should be able to write a call to an external js file and that should run. Can you post the code you're using?
also why not just window.open('http://yoursite.com/path/to/an/html/file.html') instead of document.writing to it. This would be cleaner and would maintain the separation of structure and behavior.