How can I control (change volume, play, pause) of a data-background-video in reveal.js when the slide is shown and the video already running?
I tried something like
<section data-state="myState" id="myID" data-background-video="small.ogv"></section>
and
Reveal.addEventListener( 'myState', function() {
document.getElementById('myID').dataset.backgroundVideo.volume=0.5;
} );
but it didn't work. Does anyone have a clue how to address and control the background video?
Related
I want the Aframe default screen to be in a small portion of my site, so first I want to hide the overlays, any help would be greatly appreciated!
If it was only aframe i'd suggest embedding it:
<div id="myEmbeddedScene">
<a-scene embedded>
<!--- ---!>
To keep the ar.js video from getting onto your entire website, i'd suggest throwing it to an iframe:
<iframe src="ar.html"></iframe>
Glitch here.
If you want to get rid of the ar.js debugUI, you can disable it:
<a-scene arjs="debugUIEnabled: false">
So I need to open an embedded YouTube player in a website, and I would like to set the focus to the player so that users can interact with the player like for instance toggle the video using the Space key.
var iframe = Object.assign(document.createElement('iframe'), {
src: 'https://www.youtube.com/embed/hLQl3WQQoQ0?autoplay=1&enablejsapi=1',
width: '400',
height: '200',
onload: () => {
console.log('iframe is loaded!');
iframe.focus();
}
});
document.body.appendChild(iframe);
This code inserts the player, and onload is called but the player still does not get the focus. Any idea if this is doable or not?
You would need to focus on the document inside the iframe to achieve this, which is not possible due to security reasons.
However, you can add a hidden button input, focus on it, and then use keyCode and the player API from youtube to pause and play the video in the case you press the space bar on that focused input of yours.
Have a look on this answer, and on the codepen it links to.
I have a page with a videojs player.
<div id='modal-bg'>
<div id="video-exit"></div>
<div class="video-box-wr">
<video id="model_vid" class="video-js vjs-default-skin" controls poster="myposter.png" data-setup='{}'>
<source src="video.mp4" type='video/mp4'>
</video>
</div>
</div>
The div with id "modal-bg" has it's display set to none in css. When the user clicks a button, the div fades in and the video starts playing.
if($('#model_vid').length>0){
_V_("model_vid").ready(function() {
var video_player = this;
$("#view-video-button").click(function(){
$("#modal-bg").fadeIn(function(){
// video_player.play();
});
video_player.play();
});
$("#video-exit").click(function(){
video_player.currentTime(0);
video_player.pause();
$("#modal-bg").fadeOut();
});
});
}
Works fine on desktop (Chrome, Firefox, Safaru and IE9) but not on the iPad (iOS 6.1.2).
Firstly, video_player.play() doesn't work inside the callback after fading in. With it outside the callback like in the above code it does start playing properly.
Second - when you exit the video it stops and fades out properly - but when you press play a second time the video fades in but won't play. The controls are visible but don't work and the screen is black. Exiting out still works and the player fades out properly.
A similar issue was reported here but with no solution.
I had a similar issue. I fixed the problem by adjusting the opacity. When you call display: none; / display: block; theres some reseting going on with some of the browsers. I think i also had this problem with firefox. Also another option would be setting the height to 0%, to give the appearance its gone. Hope that points you in the right direction.
The document has a number of divs only one of which is visible at any one time (others are display:none).
When a div which was visible is hidden and then made visible again the videos within the div don't play any more.
However this is only a problem on iPad.
Any suggestions as to how to re-initialise them?
thanks
Derek
Having searched in every possible way for a solution it does seem that videos using video.js in a container that is hidden after video.js has initialised them become unplayable when made visible again.
So for now, when my pages detect that the browser is on iPad/iPhone they use the native video player.
To do this I place the includes for the video.js inside a javascript block in the head of the page so they are not loaded if iPad or iPhone is detected.
<script type="text/javascript">
if(!navigator.userAgent.match(/iPad/i) && !navigator.userAgent.match(/iPhone/i)) {
document.write('<link href=\"\/\/vjs.zencdn.net/c/video-js.css\" rel=\"stylesheet\" type=\"text/css\" \/\>');
document.write('<script src=\"\/\/vjs.zencdn.net/c/video.js\" type=\"text/javascript\"\>\<\/script\>');
}
</script>
I had this problem on firefox but it was because I was trying to stop the video after move its container div to a hidden div. I removed the "stop" code, the player seems to reinitalize?(and stop by itself) after being moved from one div to another on chrome, firefox and opera.
Before this simple solution, I thought to just re-add the video original html via javascript, it probably can be done after the div is hidden or before it is shown.
I'm working on some video controls for the iPad. When the user clicks a button, the video plays and immediately goes fullscreen. When the user clicks the "Exit fullscreen" button, I want the video to pause. If I could disable the "Exit fullscreen" button and force the user to use the "Done" button I would, but that doesn't seem to be an option.
My problem is that the webkitfullscreenchange event does not seem to fire on the iPad. It works flawlessly in Chrome on the desktop. I've read that the iPad browser won't run your event if metadata has not been loaded (which doesn't load until the video is played on the iPad - preload is ignored), but I have confirmed that metadata has been loaded before the fullscreen event is firing. Does anyone have any ideas on why the webkitfullscreenchange event will not fire on the iPad?
<script type="text/javascript">
$(document).ready(function() {
$(".jqVidLink").click(function(e) {
e.preventDefault();
var vidId = $(this).attr("name");
playPause(document.getElementById(vidId));
});
$(".jqVideo").each(function() {
this.addEventListener("webkitfullscreenchange", function(){
alert("hi2"); //never fires
if (document.webkitIsFullScreen == false) {
playPause(this);
}
}, false);
this.addEventListener("loadedmetadata", function() {
alert("hi"); //firing
this.webkitEnterFullscreen();
}, false);
});
});
function playPause(myVideo) {
if (myVideo.paused){
myVideo.play();
}
else
myVideo.pause();
}
reminds me of an article calling the iPad the new IE6. Don't expect the iOS browser to behave like desktop safari.
as a workaround you could show the video inline (--> not with native fullscreen) and add your own controls. downside of this approach is that the browser navigation wastes some vertical-space. upside is you can fully control what's happening. following this idea you can imitate fullscreen by putting the video (and your custom controls) inside a container which then has to be positioned fixed and sized to 100% for width and height - i did that by adding a class as you don't have to worry about the previous size when switching back to normal. instead you simply remove the class again.
one other thing to keep in mind if you wanna do this: you cannot move a video-node via JS inside the container on iOS. Instead you either have to provide the full markup in html or clone the video-node, remove the original and insert the cloned one inside your container.
you can try the .element:-webkit-full-screen css property
I was not able to register a fullscreen exit event for iframes on Safari