I have a video tag that receives a video stream through WebRTC (I'm using peerJS)
function getVideoStream() {
PEER.on('call', function(call) {
call.answer(); // Answer the call with an A/V stream.
call.on('stream', onReceiveStream);
});
}
function onReceiveStream(stream){
$('video').prop('src',window.URL.createObjectURL(stream));
}
Everything is working fine, but my video is freezing, it only works correctly if i scroll up and down, so i'm assuming it got something to do with the video redrawing the frames.
Is there anything I should do to keep it from happening ?
Thanks,
Okay I'm confused. If I un-comment the alert below the video plays when I click the play button, but only while the alert is on the screen. If I comment out the alert the video doesn't play at all. I have spent the last hour researching and playing with this but can't figure it out. Suggestions for a fix?
$(document).ready(function(){
$('#play').click(function(){
if($('#player').get(0).paused){
$('#player').get(0).play();
//alert('playing');
}else{
$('#player').get(0).pause();
}
});
});
duh...added return false and it works.
Okay so I have followed a good tutorial regarding embedding videos via HTML5 video tag, which can be found here. Basically the idea is that on hover the video plays, on hover out it stops playing.
Well, I've been trying to include multiple videos on one page (all the same video, mind you) in hopes that I could create a sort of interactive multi-tiled board of sorts. In other words, you hover over each video, it creates varying images based on where in each video you end up, etc.
Whatever, the question I am asking is: based on this tutorial that I've followed, what is the best way to create multiple, tiled videos? I'll paste the code I've been working with. The problem I'm having is that if I create multiple javascript functions, it shows only the video of the last function I've created, rather than all videos.
I hope this makes sense. Here is the link to what I've been working on so far. NOTE: the video takes a while to load, so until then it will play the sound but no image.
Thanks in advance for any help!
Here is the solution I found:
The only warning I give you is to set the videos to preload="none" because if they all load it will be nightmare on your bandwidth. I had to switch mine and now I am looking for a solution to let people know a video is loading.
var vid = document.getElementsByTagName("video");
[].forEach.call(vid, function (item) {
item.addEventListener('mouseover', hoverVideo, false);
item.addEventListener('mouseout', hideVideo, false);
});
function hoverVideo(e)
{
this.play();
}
function hideVideo(e)
{
this.pause();
}
Here is where I got the answer: http://www.dreamincode.net/forums/topic/281583-video-plays-on-mouse-over-but-not-with-multiple-videos/
For anyone that's looking to achieve this using jQuery, here's a solution that I use for dynamically loaded content:
//play video on hover
$(document).on('mouseover', 'video', function() {
$(this).get(0).play();
});
//pause video on mouse leave
$(document).on('mouseleave', 'video', function() {
$(this).get(0).pause();
});
This can be used for a page with 1 - N videos, and only the hovered video will play at each time, while each will pause on the current frame on mouseleave.
Here's an example of it in action: http://jsfiddle.net/cc7w0pda/
Try this, it's easy to understand
<!DOCTYPE html>
<html>
<video id="vv" width="500" height="500" controls onmouseout="this.pause()" onmouseover="this.play()">
<source src="xx.mp4">
Your browser does not support this file
</video>
</html>
When using HTML5 video, is it possible to have a constantly running script while the video is playing (but only when its playing)?
For example:
video.onplaying = function(e){
alert("playing");
}
video.bind("ended", function(){
alert('Video Ended');
});
These are examples I found and tried to incorporate into my player with little success.
When video starts call setInterval() to start your background task and give it the repeat frequency.
Do tasks in this function.
When video stops call clearInterval().
https://developer.mozilla.org/en/window.setInterval
Notified today that vimeo on chrome push the F11 button for you !
I haven't found any info on how it work but it's very cool.
I'm using mediaelement.js for now, is they planning to implement this ?
To try it open a video on vimeo, make sure you are in HTML5 (bottom right of post, on top right of the comments) and click "Switch to HTML5 player"
Play a video in a real fullscreen !
Chrome dev channel now comes with the fullscreen API
Sample usage:
<video width="300" src="movie.webm" controls></video>
<button onclick="enterFullscreen()">Get Huge!</button>
function enterFullscreen() {
var elem = document.querySelector('body');
elem.onwebkitfullscreenchange = function(e) {
console.log("Entered fullscreen!");
elem.onwebkitfullscreenchange = onFullscreenExit;
};
elem.webkitRequestFullScreen();
}
See this slide deck for usage, and here's a demo of the API in action.