I am using the code in this codepen http://codepen.io/frytyler/pen/juGfk to make custom controls for my video player which works great except when I have the video set to "autoplay" like in the code below. It plays the video but I then have to press pause twice to pause it, how would I modify the code to solve this?
<video id="myVideo" autoplay controls preload="auto" poster="http://s.cdpn.io/6035/vp_poster.jpg" width="380" >
http://codepen.io/anon/pen/PZwxed
It's quick solution for screen, adding this snippet at last line of js inside of dom.ready().
//doubleclick
$('#myVideo').click(function () {
if ($("#myVideo").get(0).paused) {
$("#myVideo").get(0).play();
}
});
$('#myVideo').dblclick(function () {
$("#myVideo").get(0).pause();
});
there a problem, play/pause button may act weird when you click button after of click twice in screen, you need to assign play/pause button class to display properly or it would look best if you hide this button.
EDIT:
You may manipulate play/pause button in following code:
var vid = document.getElementById("myVideo");
vid.onplaying = function() {
//call when video is playing, it should show pause icon in button like .addClass and .removeClass
};
vid.onpause = function() {
//call when video is paused, it should show play icon in button like .addClass and .removeClass
};
Related
I have a webpage with three small html5 videos. When this part of the page loads the first video plays, then when it ends the second video plays, and when the second ends then the third plays. I did this with addEventListener for 'ended'. My code looks like this:
//first video
var player1=document.getElementById('firstVideo');
player1.addEventListener('ended',vidHandlerLow,false);
//second video
var player2=document.getElementById('secondVideo');
player2.addEventListener('ended',vidHandlerMedium,false);
//third video
var player3=document.getElementById('thirdVideo');
player3.addEventListener('ended',vidHandlerHigh,false);
player1.play();
function vidHandlerLow() {
player1.pause();
player2.play();
}
function vidHandlerMedium() {
player2.pause();
player3.play();
}
function vidHandlerHigh() {
player3.pause();
}
The issue I'm having is that i'm trying to play a single video on hover without triggering the ended event which will play the rest. I have tried:
onmouseover="this.removeEventListener('ended'); this.play();"
But the ended event is still triggered. If I hover over video1 then video1 will play then two and three when only the hovered video should play. Any suggestions how to play a single video without my video ended events from running?
Since I only need the videos to autoplay once I was able to remove the event listeners in the functions I call on 'ended' like this:
function vidHandlerLow() {
player1.pause();
player1.removeEventListener('ended', vidHandlerLow);
player2.play();
}
I've created an A-Frame project that has a video inside of the scene. The video works as intended while in both desktop and mobile. The issue I'm having is that only the desktop version will allow me to have a button within the a-scene tags that plays the video, whereas the mobile version only allows me to use a button if it's OUTSIDE of the a-scene tags, like in a div wrapper. The logic to load and play the video and work the button works on both desktop and mobile, the only difference is when I target the logic to a button inside of the a-scene tags. As grateful as I am that the video is playing on mobile, I would really like to have a "VR" like button inside of the scene. As of now, the button that works on mobile acts more like a VR toggle button that initiates the scene and starts the video. That's not really the desired behavior I'm going for. FYI, I'm using the same type of a-image buttons throughout the scene to toggle actual images and static content and they work very well. It just seems to be having issues with video playback. This question is a follow up to another issue I had (resolved), found here.
This works on desktop, but not mobile:
<body>
<a-scene>
<a-assets>
<img id="buttonImg" src="button.png">
<video id="video" src="video.mp4" webkit-playsinline></video>
</a-assets>
<a-image id="playButton" src="#buttonImg"></a-image>
<a-videosphere id="videoShere" loop="true" src="#video"></a-videoshpere>
</a-scene>
</body>
This works on both desktop and mobile:
<body>
<div id="canvas">
<div id="startButton">Play</div>
</div>
<a-scene>
<a-assets>
<img id="buttonImg" src="button.png">
<video id="video" src="video.mp4" webkit-playsinline></video>
</a-assets>
<!--<a-image id="playButton" src="#buttonImg"></a-image>-->
<a-videosphere id="videoShere" loop="true" src="#video"></a-videoshpere>
</a-scene>
</body>
You'll still need the splash screen to init the video on mobile, then once it's triggered (activated via user gesture) you can apply an a-frame event to play it. The reason is that WebGL events are not considered user actions and are treated like JS triggered events instead.
Dom's description from this issue:
https://github.com/aframevr/aframe/issues/1463#issuecomment-308138947
The problem is that interaction within an A-Frame scene doesn't count. The browser can't tell what's going on inside WebGL, so it has to assume those events are just generated by arbitrary JS. You need an old-fashioned physical touchstart or click event, triggered by the user's finger (or Cardboard button) and not by a fuse or gaze cursor. Gamepad buttons might also count. I don't know of a live example of this though.
Here's the modified example from the last one that might be of help:
When the start button in the splash screen is clicked, it will play, then pause the video right away to satisfy the user gesture requirement.
Then I added a click handler to the play button (inside the VR scene) that should allow you to play the video. Like before, your milage may vary with the different browsers.
https://glitch.com/edit/#!/a-frame-video-click-play-inside-scene
document.addEventListener("DOMContentLoaded", function(event) {
var scene = document.querySelector("a-scene");
var vid = document.getElementById("video");
var videoShere = document.getElementById("videoShere");
var playButton = document.getElementById("playButton");
if (scene.hasLoaded) {
run();
} else {
scene.addEventListener("loaded", run);
}
playButton.addEventListener('click', function() {
playVideo();
});
function run () {
if(AFRAME.utils.device.isMobile()) {
document.querySelector('#splash').style.display = 'flex';
document.querySelector('#splash').addEventListener('click', function () {
initVideo();
this.style.display = 'none';
})
} else {
initVideo();
}
}
function initVideo () {
vid.play();
vid.pause();
videoShere.components.material.material.map.image.play();
videoShere.components.material.material.map.image.pause();
}
function playVideo () {
vid.play();
videoShere.components.material.material.map.image.play();
}
})
https://www.npmjs.com/package/aframe-gui
Use this npm. This is for creating button in a scene using a-frame. You can add button using this npm.
I am using video.js, here is my DEMO
<video class="video-js vjs-default-skin" src="http://vjs.zencdn.net/v/oceans.mp4" controls="true" preload="yes" poster="http://www.videojs.com/img/poster.jpg" data-setup="{}">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>
When I click on play button video starts to play, it is ok works how it should, but when I scroll down without pausing the video, it still plays. I want to add some script which will do this - onscroll it will autostart video and I will see the first look with poster image.
Also I have one button (named "Scroll to video section") which is under video section, when you click on button it scroll to the video section but it must show video's first look as well - paused and with poster image. I was wondering how can I do this.
Please find this JsFiddle which has the behaviours you appear to require.
The function below was added to pause the video when any scrolling occurs.
jQuery(document).scroll(function () {
jQuery(".video-js")[0].player.pause();
});
You can change the function called to .play(); if you want the video to play on scrolling.
Please refer to this discussion thread to understand the functions that make the video play and pause.
The code above has been changed to the 3rd code snippet listed below to allow additional functionality.
The function below plays the video 3000ms (3 seconds) after the "Show Video Section" button is clicked.
setTimeout(function () {
jQuery(".video-js")[0].player.play();
}, 3000);
The code below resets the video to show the "poster". The current time is stored in order to allow the video to restart from where the user left off.
Please refer to this Stackoverflow question for more details.
jQuery(document).scroll(function () {
var time = jQuery(".video-js")[0].player.currentTime();
jQuery(".video-js")[0].player.pause().currentTime(time).trigger('loadstart');
});
The code below was used to change the Js Fiddle to start the video at the beginning on the scroll event.
jQuery(".video-js")[0].player.pause().currentTime(0).trigger('loadstart');
SAME ISSUE! As we all know firefox and audio is a problem because of patents and such. I found this little code on the internet to play my sounfile.
I would like to play multiple files instead of just one while having the display bar not show up in the browser
you can change the player width to 0 but than the user can not click the play button :P
Is there a way of possibly having the sound play on click of a link or button.
Please note. Do not give me codes that have no compatibility outside chrome and ie.
HTML
<audio id="audioplayer" preload controls loop style="width:400px;">
<source src="sounds/sound1.mp3">
<source src="sounds/sound1.caf">
</audio>
Javascript
<script type="text/javascript">
var audioTag = document.createElement('audio');
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg")) && ("" != audioTag.canPlayType("audio/mpeg")))) {
AudioPlayer.embed("audioplayer", {soundFile: "sounds/sound1.mp3"});
}
</script>
RECAP:
Have the sound play on a button or link click.
Have multiple sounds available to play (not just one)
Compatibility with firefox
non visible soundbar.
Still learning myself. But this is a button, with a script to play an audio file. (part of my own solution) Plays only 1 sound at a time, but doesn't show anything about it.
You could also make a funtion like this, without setting the src, using the pause() command.
currenttime is used to change the part where the audio file was.
Sound play button<br>
<script>
sound = new Audio();
function playSnd(soundSrc) {
sound.src = soundSrc;
sound.play();
}
</script>
I want to pause the video being played at a particular instant till a question that pops up has been answered. The user should not be able to go ahead and forward the video till a particular question that has just poppped up has been answered.
So I can pause the video using JS at that particular instant. How can I ensure the video's controls are unlocked or the video plays again only after answering the question that pops up?
look at this demo http://jsfiddle.net/dgLds/58/
var video = document.getElementById("myvideo");
function toggleControls() {
document.getElementById('myvideo').pause();
if (video.hasAttribute("controls")) {
video.removeAttribute("controls")
} else {
video.setAttribute("controls","controls")
}
}
<video id="myvideo">
<source src="http://www.w3schools.com/html5/movie.mp4" />
</video>
<p onclick="toggleControls();">Toggle</p>
instead of on click you can call the function when ever you want
Here is a opera article on everything you wish to know about html5 video http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
Specifically look at How to keep things synchronized section
EDIT: I you want to disable right-click options. Just go ahead and disable right click on that tag/id
Here is a jquery code
$('video').bind('contextmenu', function()
{
alert('no right click.');
return false;
});
I ran into the need to be able to disable the context menu myself today because we have our own custom controls. You can do this fairly easily:
video.addEventListener('contextmenu', function(e) {
e.preventDefault();
return false;
});
He is an example built upon Web Developer's demo: http://jsfiddle.net/dgLds/308/
There is a pause() method available for the video element:
document.getElementById('myVideo').pause();
Similarly, there is play().