I want to display different context-sensitive content during a video playing on a website. I am using HTML5 video and need a JavaScript API to handle eventing. I will need to control the video player as well as react to different time intervals in the video.
Popcorn.js is an open source JavaScript library for programming rich interactive experiences with HTML5 Video and Audio elements and provides a very simply API to "display different context-sensitive content during a video playing on a website".
Take a look at the demo gallery here: http://popcornjs.org/demos
Here is a tutorial, build with Popcorn.js, that shows how to create a simple Popcorn.js program: http://popcornjs.org/popcorn-101
The docs can be found here: http://popcornjs.org/api (this is still in progress)
The following example uses the Popcorn Footnote plugin to display a simple message under the video at specific time in during the playback:
<!DOCTYPE html>
<html>
<head>
<title>Popcorn Simple Example</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<script>
$(document).bind( "ready", function(){
// Create a popcporn instance by calling Popcorn("#id-of-my-video")
var pop = Popcorn("#video");
// add a footnote at 2 seconds
pop.footnote({
start: 2,
end: 6,
text: "This footnote is the stepping stone of progress!",
target: "footnote-container"
});
// play the video right away
pop.play();
});
</script>
</head>
<body>
<video height="180" width="300" id="video" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
<div id="footnote-container"></div>
</body>
</html>
Working example here: http://jsfiddle.net/rwaldron/6PEU8/
A recent demo shows how you could use an audio element as a slideshow controller, here: http://jsfiddle.net/rwaldron/DjmLM/
Related
So I have a chatting website with some friends and I'm trying to add a radio player widget to login page. But when I try adding the code and click save button, "iframe" and "document" gets removed automatically. I'm totally new to coding and stuff so I have no idea how to add a radio player widget without using inline frame. Here's the code I'm using. Please pardon my noobiness hehe.
<div class="radyoTelekomFooterDIV">
<div radyotelekom="radyoplayer-v6">
<script type="application/javascript" src="//radyoplayer.net/players/v6/player.js?v=0.6.0.0"
charset="UTF-8"></script>
</div>
</div>
<audio controls>
<source src="path-to-audio-file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Above is an example of HTML5 audio player code, check if this help you.
Replace "path-to-audio-file.mp3" with the URL or path to the audio file you want to play.
HTML5 audio player does not require an iframe.
I am building a simple page consisting of a table containing links to videos. The action I'm trying to duplicate is essentially how the menu system works on a DVD. I want to be able to launch a video, and when the video finishes, I want the menu (our original launching page) to be displayed again without having to hit the browser's "back" button.
The code below demonstrates how each video is launched. Using this code, when a video finishes playing, we are left at the blank screen where the video ends.
<td align="center"><strong><span style="font-family: Arial; font-size:24px;">
Yakima Video</span></strong></td>
</tr>
So, here I am again. I have now tried to set up a forwarding myself. I believe here is a way for you to advance your project. Greetings to your grandson.
This is the code i used:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<video id="video1" controls="controls">
<source src="sample.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
video = document.getElementById('video1');
video.addEventListener('ended',function() {
window.location.href = 'https://www.youtube.com/';})
</script>
</body>
<!doctype html>
<html>
<head>
<title>multiple pseudo scenes</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/aframe/0.5.0/aframe.js">
</script>
</head>
<body>
<a-scene>
<a-assets>
<video id="video-src" autoplay="false" src="https://www.youtube.com/watch?
v=Uz12cLvkVYY"></video>
</a-assets>
<a-video id="video-screen" src="#video-src" position="1.591 2.206 -11"
width="30" height="13">
</a-video>
</a-scene>
</body>
</html>
This is my code. I want to load youtube video in a scene using a-frame. But it does not show anything. How to load a youtube video using a-frame?
It'd be very convenient if you could just drop a youtube URL into a <video> tag, but that's unfortunately not how it works. To embed a youtube video in your page you need to follow one of the methods in the youtube API, which ends up one way or another inserting an iframe in your page containing the video.
And iframes can't be used inside a-frame:
There is no way for the browser to display <iframe>s within WebGL. While it is possible to overlay an <iframe> on top of the canvas, the <iframe> will not display in VR nor can it integrate with the scene.
Further on in the a-frame docs, youtube is specifically mentioned:
Can I render YouTube videos as a texture? No. You could proxy YouTube videos as a texture or download them locally to serve, but that is against their terms of service.
...which suggests that video is possible, but youtube is not (for legal, rather than technical, reasons). If you need to do this you'll need a non-youtube video source.
I am using the <video> tag, and I want to use any URL from YouTube in it.
I have this http://jsfiddle.net/wCrNw/ but it's not working.
I have checked this Show Youtube video source into HTML5 video tag? but that is not solving my problem.
<video controls="controls"
class="video-stream"
x-webkit-airplay="allow"
data-youtube-id="N9oxmRT2YWw"
src="http://www.youtube.com/watch?v=OmxT8a9RWbE"
></video>
MediaElement YouTube API example
Wraps the YouTube API in an HTML5 Media API wrapper, so that it can be programmed against as if it was true HTML5 <video>.
<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<video width="640" height="360" id="player1" preload="none">
<source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>
<script>
var player = new MediaElementPlayer('#player1');
</script>
Video tag supports only video formats (like mp4 etc). Youtube does not expose its raw video files - it only exposes the unique id of the video. Since that id does not correspond to the actual file, video tag cannot be used.
If you do get hold of the actual source file using one of the youtube download sites or soft wares, you will be able to use the video tag. But even then, the url of the actual source will cease to work after a set time. So your video also will work only till then.
The most straight forward answer to this question is: You can't.
Youtube doesn't output their video's in the right format, thus they can't be embedded in a
<video/> element.
There are a few solutions posted using javascript, but don't trust on those, they all need a fallback, and won't work cross-browser.
This would be easy to do :
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
Is just an example.
This will give you the answer you need. The easiest way to do it is with the youTube-provided methods. How to Embed Youtube Videos into HTML5 <video> Tag?
According to a YouTube blog post from June 2010, the "video" tag "does not currently meet all the needs of a website like YouTube" http://apiblog.youtube.com/2010/06/flash-and-html5-tag.html
Try this solution for the perfectly working
new YouTubeToHtml5();
I have Multiple HTML5 flow player instances on my page. When I start to play one, then click on another one, the first one doesn't stop. Is there any way to configure it so that only one will play at a time?
Here is the code for a test page:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>
<!-- 2. flowplayer -->
<script type="text/javascript"
src="//releases.flowplayer.org/5.4.1/flowplayer.min.js">
</script>
<!-- 3. skin -->
<link rel="stylesheet" type="text/css"
href="//releases.flowplayer.org/5.4.1/skin/minimalist.css">
<title>title</title>
</head>
<body>
<div>
<div class="flowplayer">
<video>
<source type="video/mp4" src="PATH TO VIDEO 1">
</video>
</div>
</div>
<div>
<div class="flowplayer">
<video>
<source type="video/mp4" src="PATH TO VIDEO 2">
</video>
</div>
</div>
</body>
</html>
Ok. Finally found it! It's a feature called "Splash"
From the documentation:
Flowplayer has a unique feature called "splash screen" which is similar to the poster setup except that the nested VIDEO or Flash OBJECT tag initially is not present on the page, but is inserted on demand. The player is installed on the fly when the user clicks on the splash screen. This has the following benefits:
You can have an unlimited amount of players on the page and they - or rather their splash screens - all render immediately, even in Flash mode.
There are no hidden Flash objects which interfere with your scripting or CSS layout dynamics.
Only one video can be played at a time. When the user clicks on a splash screen while another player instance is running, the latter is unloaded automatically.
By design the splash setup also disables preloading of the video.
https://flowplayer.org/docs/setup.html#splash
As far as I'm aware there is no default behavior in flowplayer to only allow one video to play when there are multiple instances on a page (whether using the flash player or the newer HTML5).
You can do this yourself using the flowplayer api. The api offers methods such as play(), pause() and stop(). In your case you could bind to the click event to be able to stop all other instances.
Example
$('#bacon-player').bind("click", function(e, api)){
// Add code here to stop other players.
$('#other-player').stop();
};