Does anyone know if html5 video allows objects like buttons, menu, etc connected to the timeline?
Youtube flash player do this: in specific moment, show an object (banner, links, comments) over the video for defined seconds.
thanks
Yes and no,
It's possible to create very interactive video-based presentations using html5 video objects however it requires a lot more than just the video object itself. You can nest video into a canvas object then mess with the actual video image frames, you can overlay any visual html element on top of the video object itself then animate these, you can control the video playback with buttons, click events etc. You can even have the video object control the rest of the page with time-based listeners.
Popcorn.js is really really good and easy to learn, allowing you to do all of what you mentioned.
http://popcornjs.org
http://popcornjs.org/demos
It's not part of the HTML5 video standard, but it's easy to implement manually by wiring up some scripting to the progress event. By looking at the currentTime property of the video object you can decide when to show/hide additional elements.
eg showing an element on top of a video between 1 and 2 seconds into a video:
<video id="v">...</div>
<div id="overlay" style="position: relative; top: -80px;">HELLO</div>
<script type="text/javascript">
var overlay= document.getElementById('overlay');
var video= document.getElementById('v');
video.addEventListener('progress', function() {
var show= video.currentTime>=1 && video.currentTime<2;
overlay.style.visibility= show? 'visible' : 'hidden';
}, false);
</script>
X2TV (www.x2.tv) has a drag and drop studio where you can overlay icons and additional content within the HTML5 layer.
In case you woul like to use a more generic framework https://github.com/nise/vi-two could be interesting for you.
Related
I study graphics as one of my subjects at school. Currently, my task is to make a website for a party so I have started to create the homepage. The home page has four balloons on it and when you roll over them they pop. But, what I also want them to do is to play a balloon popping sound effect when you roll over them and they pop.
However, I cant work out what the HTML would be to achieve this.
The website: partybox.businesscatalyst.com
This cannot be done efficiently using only HTML, as it will require the use of <audio> as in
<audio autoplay>
<source src="file.wav" type="audio/wav"><!--file.wav will replace your sound file with the pop effect-->
</audio>
However, the <audio> still required to be started (in case of controls) or dynamically created (in case of autoplay) - which will still require JavaScript.
A simpler JavaScript method would be like - on your onclick or onhover function, simply add this JavaScript Code:
var sound = new Audio("file.wav"); //file.wav will replace your sound file with the pop effect
sound.play(); //Play the sound
I need to play and pause the video player if any part of the video is clicked, so I implemented something like:
$("#promoPlayer").click(function() {
$("#promoPlayer").click(function() {
if(this.paused){
this.play();
} else {
this.pause();
}
});
...but now the controls of the video won't pause/play.
You can see it in action here(http://175.107.134.113:8080/). The video is the second slide on the main carousel at the top.
I suspect I'm now getting 2 onclick events one from my code above and a second on the actual pause/play button.
I don't understand how the actual video controls work, because when I inspect the element, I just see a tag. If I could differentiate the controls, then perhaps I might have figured out a solution by now.
Anyone know how I should have done this, or is my solution ok. If my solutions ok, how do I intercept a click on the control, so that I only have one click event to pause / play?
If you look on the media element home page, they have a big play button, complete with mouseOver, but I can't see how they have done that? Can someone else help?
The controls of the browser's native player are not individual DOM elements so I don't believe there's a way to identify them.
My suggestion would be to create an invisible div which covers the player but not the controls, and bind your logic to that.
Ok, I was being an idiot. I hadn't initialised the MediaElement player:
$(document).ready(function(){
$("#promoPlayer").mediaelementplayer({
features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],
// Hide controls when playing and mouse is not over the video
alwaysShowControls: false
});
});
Which mean't that what I thought was MediaElement, was actually just my browser's native support for the tag...
As expected MediaElement does of course give you such things as being able to click the whole video frame and have the video start for free...
The player should already play/pause on click, but if you want to attach events it's best to do so within the success handler:
$(document).ready(function(){
$("#promoPlayer").mediaelementplayer({
success: function(media, domElement, player) {
$('#somebutton').on('click', function() {
media.play();
});
}
});
});
I've been Googling around a bit for an answer and haven't found a definitive one either way: is it possible to play a video using an HTML5 canvas, and also allow the user to draw on this video? The use case, for some context, is to play a video on infinite loop so the user can draw multiple boxes over specific areas to indicate regions of interest.
As a bonus (:P), if I can figure out how to do this on its own, any hints as to how this could be done within Drupal? I'm already looking at the Canvas Field module, but if you have any hints on this point too (though the first one is the priority), that'd be awesome!
You can draw html5 video elements onto a canvas. The drawImage method accepts a video element in the first parameter just like an image element. This will take the current "frame" of the video element and render it onto the canvas. To get fluid playback of the video you will need to draw the video to the canvas repeatedly.
You can then draw on the canvas normally, making sure you redraw everything after each update of the video frame.
Here is a demo of video on canvas
here is a in-depth look into video and the canvas
I recently received this request from a client to provide this feature, and it must be CMS-friendly. The technique involves three big ideas
a drawing function
repeatedly calling upon the same drawing function
using requestAnimationFrame to paint the next frame
Assuming you have a video element already, you'd take the following steps
Hide the video element
Create a canvas element whose height/width match the video element, store this somewhere
Get the context of the canvas element with `canvas.getContext('2d') and also store that somewhere
Create a drawing function
In that drawing function, you would use canvas.drawImage(src, x, y) where src is the edited version of the current frame of the video;
In that drawing function, use recursion to call itself again
I can give you two examples of this being done (and usable for content management systems)
The first is here: https://jsfiddle.net/yywL381w/19/
A company called SDL makes a tool called Media Manager that hosts videos. What you see is a jQuery plugin that takes its parameters from a data-* , makes a request from the Media Manager Rest API, creates a video, and adds effects based entirely on data* attributes. That plugin could easily be tweaked to work with videos called from other sources. You can look at the repo for it for more details on usage.
Another example is here: http://codepen.io/paceaux/pen/egLOeR
That is not a jQuery plugin; it's an ES6 class instead. You can create an image/video and apply a cropping effect with this:
let imageModule = new ImageCanvasModule(module);
imageModule.createCanvas();
imageModule.drawOnCanvas();
imageModule.hideOriginal();
You'll observe, in the ImageCanvasModule class, this method:
drawFrame () {
if (this.isVideo && this.media.paused) return false;
let x = 0;
let width = this.media.offsetWidth;
let y = 0;
this.imageFrames[this.module.dataset.imageFrame](this.backContext);
this.backContext.drawImage(this.media, x, y, width, this.canvas.height);
this.context.drawImage(this.backCanvas, 0, 0);
if (this.isVideo) {
window.requestAnimationFrame(()=>{
this.drawFrame();
});
}
}
The class has created a second canvas, to use for drawing. That canvas isn't visible, it's just their to save the browser some heartache.
The "manipulation" that is content manageable is this.imageFrames[this.module.dataset.imageFrame](this.backContext);
The "frame" is an attribute stored on the image/video (Which could be output by a template in the CMS). This gets the name of the imageFrame, and runs it as a matching function. It also sends in the context (so I can toggle between drawing on the back canvas or main canvas if needed)
then this.backContext.drawImage(this.media, x, y, width, this.canvas.height); draws the image on the back context.
Finally, this appears on the main canvas with this.context.drawImage(this.backCanvas, 0, 0); where I take the backcanvas, and draw it on to the main canvas. So the canvas that's visible has the least amount of manipulations possible.
And at the end, because this is a video, we want to draw a new frame. So we have the function call itself:
if (this.isVideo) {
window.requestAnimationFrame(()=>{
this.drawFrame();
});
This whole setup allows us to use the CMS to output data-* attributes containing the type of frame the user wants to be drawn around the image. the JavaScript then produces a canvasified version of that image or video. Sample markup might look like:
<video muted loop autoplay data-image-frame="wedgeTop">
Is it possible to use HTML5 to make a sound when a user hovers over one of my list item buttons? I'd like to play a very short click/chirp sound one time when a user hovers over a navigation button. I realize it won't be compatible on every browser or device and that's OK as long as it degrades gracefully. Would it be better to use Flash for this for some reason?
Edit
Also, if it's possible to do this I'd be interested in some sample code, including the javascript (if javascript is needed). I'm OK with HTML but not too handy with Javascript.
I’ve not done anything like this, but it should be possible. E.g.
<audio id="myaudio" src="myaudio.mp3"></audio>
<button onmouseover="document.getElementById('myaudio').play()">Hover me</button>
I’m not familiar with Flash, so I’m not sure if you can use JavaScript to get a Flash file to play.
This is an old answer, nowdays you can just use HTML5 really.
I'd not recommend a sound on a hover. Users can get annoyed very easily (I would).
In any case, here's how, and it doesn't need HTML5:
1) Have a simple javascript to play the sound
<script>
function EvalSound(soundobj) {
var thissound=document.getElementById(soundobj);
try {
thissound.Play(); //Quicktime, Windows Media Player, etc.
}
catch (e) {
thissound.DoPlay(); //Real Player
}
}
</script>
2) Make an invisible embed with the sound
<embed src="mysound.wav"
autostart=false
width=0
height=0
id="mySound"
enablejavascript="true" />
3) Make it play on hover
<ul id="myList">
<li onHover="EvalSound('mySound')">Foo</li>
<li onHover="EvalSound('mySound')">Bar</li>
</ul>
Alternatively, attach event with jQuery:
<script>
$(document).ready(function() {
$('#myList').hover(EvalSound('mySound'));
});
</script>
Edited because realplayer uses DoPlay() instead of Play().
I am trying to embed a flash movie (.flv) into a webpage with a transparent background.
Requirements:
- Flv runs in transparent mode - I must be able to view html contents below.
- Movie does not auto play
- Movie is contained in a div and positionend absolutely using CSS
- No video controls or overlays, you shouldn't know it's an flv
- On load Movie is hidden
- Using jQuery, I click an image link to show and play the video, clicking it again stops and hides the video - vice versa
I have tried using Longtail Video Player with swfobject.js and javascript controls but no joy. Video is not transparent and controls with a click to play still feature.
Am I overcomplicating what appears to be quite a simple task.
I happy to explore any implementation.
Adobe flash embed parameters have been set correctly and wmode = transparent.
Any help would be greatly appreciated.
Cheers
Paul
This will get you a transparent overlay in flash. Its a pretty good set of code.
http://code.google.com/p/swfobject/
SWFObject Examples
The example given above is what you need for the bare bones use of SWFObject, but what if you want to use some of the other parameters the Flash plug-in has to offer? SWFObject makes it very easy to add any extra parameter you may need. The examples below are a number of different methods you may wish to use to embed your Flash content.
A simple example adding a few extra parameters
<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
so.addParam("quality", "low");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashcontent");
</script>
<div id="flashcontent"><!--put a place holder image in here.--></div>
http://blog.deconcept.com/swfobject/
EDIT:
THANKS TO Unreality: There has been an update in the code library you can now access it here: http://www.code.google.com/p/swfobject