Using the following HTML and JavaScript, I've been trying to trigger fullscreen video on the iPad. This works if there is only one video, but because there are numerous videos on the same page, only the first one works. I don't know how to separate out the videos so that they will all work properly. I've tried changing the IDs, and still, it doesn't work. Any advice would be greatly appreciated!
HTML:
<video id="test1" width="100%" height="200px" poster="http://www.example.com/wp-content/uploads/2013/12/example.png">
<source src="http://video.example.com/example.mp4" type="video/mp4">
</video>
<button id="test2">Play Video</button>
JavaScript:
<script type="text/javascript">
var video = document.getElementById('test1'),
play = document.getElementById('test2'),
time;
video.addEventListener('webkitbeginfullscreen', function() {
play.innerText = 'Play Video';
window.clearInterval(time);
});
video.addEventListener('webkitendfullscreen', function() {
video.pause();
});
play.addEventListener('touchstart', function() {
time = window.setInterval(function() {
try {
video.webkitEnterFullscreen();
}
catch(e) {}
}, 250);
play.innerText = 'loading ...';
video.play();
});
</script>
Without looking at the page that contains multiple videos, it's hard to know for sure. But it sounds like you may be using the #test1 and #test2 IDs in your HTML more than once, in which case document.getElementById('test1') would only return the first matching element on the page. Check out the result of what's being console'd out here: http://jsfiddle.net/tjnicolaides/q7Pyh/
Try using document.getElementsByTagName or document.getElementsByClassName and looping through the results to add your event listeners to each video on the page. Here's an example: http://jsfiddle.net/tjnicolaides/NDYkU/
var videos = document.getElementsByTagName('video'),
play_buttons = document.getElementsByClassName('play_button'),
time;
for(var i=0; i< videos.length; i++) {
// add event listeners and stuff here
}
for(var i=0; i < play_buttons.length; i++) {
// add event listeners and stuff here
}
Related
So I'm using video.js on a multipage project that has pages with differing numbers of videos on each page. I want playing one video to pause any other video playing on the page. I've got it to work, but my code only works if it's made specifically to the page, as opposed to working on each page on its own.
HTML (example)
<video id="video5" poster="poster.png" class="video-js vjs-16-9 vjs-big-play-centered"
data-setup='{
"controls": true,
"autoplay": false,
"preload": "none"
}'>
<source src="video.mp4" type='video/mp4'>
</video>
JS
var player1 = videojs('video1');
var player2 = videojs('video2');
var player3 = videojs('video3');
var player4 = videojs('video4');
var player5 = videojs('video5');
var player6 = videojs('video6');
var players = [player1, player2, player3, player4, player5, player6];
players.forEach(function(player) {
player.on('play', function() {
console.log('test');
players.forEach(function(pl) {
if (pl !== player) {
pl.pause();
}
})
})
});
So this works fine if I have 6 videos with those coinciding id's. But if I have more or less, it breaks. Is there a way to format the JS to just pause anything by class as opposed to by id? I've tried ('.video-js').pause() but this throws an error.
NM, found the answer. Leaving this up so it's easier to find for people possibly.
var medias = Array.prototype.slice.apply(document.querySelectorAll('audio,video'));
medias.forEach(function(media) {
media.addEventListener('play', function(event) {
medias.forEach(function(media) {
if(event.target != media) media.pause();
});
});
});
You can select these elements by class name instead of id. Something like this:
var videos = document.getElementsByClassName('video-js');
for (var i = 0; i < videos.length; i++) {
videos[i].pause();
}
If you are using jquery then.
$('video').each((videoIndex, video) => {
console.log('video paused', video);
video.pause();
})
So I'm using video.js on a multipage project that has pages with differing numbers of videos on each page. I want playing one video to pause any other video playing on the page. I've got it to work, but my code only works if it's made specifically to the page, as opposed to working on each page on its own.
HTML (example)
<video id="video5" poster="poster.png" class="video-js vjs-16-9 vjs-big-play-centered"
data-setup='{
"controls": true,
"autoplay": false,
"preload": "none"
}'>
<source src="video.mp4" type='video/mp4'>
</video>
JS
var player1 = videojs('video1');
var player2 = videojs('video2');
var player3 = videojs('video3');
var player4 = videojs('video4');
var player5 = videojs('video5');
var player6 = videojs('video6');
var players = [player1, player2, player3, player4, player5, player6];
players.forEach(function(player) {
player.on('play', function() {
console.log('test');
players.forEach(function(pl) {
if (pl !== player) {
pl.pause();
}
})
})
});
So this works fine if I have 6 videos with those coinciding id's. But if I have more or less, it breaks. Is there a way to format the JS to just pause anything by class as opposed to by id? I've tried ('.video-js').pause() but this throws an error.
NM, found the answer. Leaving this up so it's easier to find for people possibly.
var medias = Array.prototype.slice.apply(document.querySelectorAll('audio,video'));
medias.forEach(function(media) {
media.addEventListener('play', function(event) {
medias.forEach(function(media) {
if(event.target != media) media.pause();
});
});
});
You can select these elements by class name instead of id. Something like this:
var videos = document.getElementsByClassName('video-js');
for (var i = 0; i < videos.length; i++) {
videos[i].pause();
}
If you are using jquery then.
$('video').each((videoIndex, video) => {
console.log('video paused', video);
video.pause();
})
I'm not entirely sure how to run a function that syncs up with the updating of a webpage.
I have a checkbox that runs a function if checked.
Html:
<input type="checkbox" value="data.id" id="status" ng-model="data.status" class="Form-label-checkbox" ng-change="IfCheck(data.Url)">
The IfCheck function adds the url into an array, $scope.ids
JavaScript: //kind of psuedocode
$scope IfCheck(url){
$scope.ids.push(object);}
$scope.Playall = function(){
var audioElements = document.getElementsByTagName("audio");
for(var i = 0; i < audioElements.length; i++){
audioElements[i].play();
}
}
This seems to work well so far. The array ids gets populated with the URLs on the fly. Afterwards, I run ng-repeat on this array, and create an element with the source as the url. This works as well.
HTML:
<div ng-repeat="data in ids">
<audio controls>
<source src="{{data.Url | trustUrl}}" id = "Synth.wav" type="audio/mpeg">
Your browser does not support the audio element.
</audio> </div>
My problem is this now. Lets say I check two boxes, and create two audio players on the fly. They play music if I click the play button. Is there a way to somehow make a button so that it will play both of them at the same time? I thought of something like
<button ng-click = "Playall()"> Playall </button>
but I'm not sure how to write the function to "link" to the created elements.
The Playall() function can look something like this:
$scope.Playall = function(){
Array.from(document.getElementsByTagName("audio")).forEach(audio => audio.play());
}
OR:
$scope.Playall = function(){
var audioElements = document.getElementsByTagName("audio");
for(var i = 0; i < audioElements.length; i++){
audioElements[i].play();
}
}
I'm using the following code to trigger fullscreen when a user clicks on the play button on a <video> element:
var video = $("#video");
video.on('play', function(e){
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
});
But nothing happens when I click the play button.
Any idea's why?
EDIT: Here's my HTML code:
<video width="458" height="258" controls id='video' >
<source src='<?= bloginfo('template_directory'); ?>/inc/pilot.mp4' type="video/mp4">
<source src='<?= bloginfo('template_directory'); ?>/inc/pilot.ogv' type="video/ogg">
<source src='<?= bloginfo('template_directory'); ?>/inc/pilot.webm' type="video/webm">
</video>
There are a couple things going on here:
First, in your code, video is a jQuery object, not the actual video element. For a jQuery object, you can reference it like this:
var actualVideo = video[0]; // (assuming '#video' actually exists)
Second, for security and good user experience, browsers will only let you trigger full screen inside a user-triggered event, like a 'click'. You can't have every web page going to full screen as soon as you visit it, and you can cause a video to start playing automatically, which would violate that rule.
So an alternative solution would be to request fullscreen in a click event, like this:
var video = $("#video");
video.on('click', function(e){
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
});
Ideally, you'd probably want to build out a more complete player ui, but this should give you the general idea.
A less verbose way to toggle full screen combining answers from this and other questions.
This should handle all browser flavours: chromium- and webkit-based, firefox, opera, and MS-based browsers.
var p = document.querySelector('#videoplayer');
if (!window.isFs) {
window.isFs = true;
var fn_enter = p.requestFullscreen || p.webkitRequestFullscreen || p.mozRequestFullScreen || p.oRequestFullscreen || p.msRequestFullscreen;
fn_enter.call(p);
} else {
window.isFs = false;
var fn_exit = p.exitFullScreen || p.webkitExitFullScreen || p.mozExitFullScreen || p.oExitFullScreen || p.msExitFullScreen;
fn_exit.call(p);
}
p represents the DOM object of the video element, and window.isFs is just a random variable for storing the current fullscreen state.
If your player is a jQuery object then you can get the underlying DOM-element with var p = player.get(0).
function EvalSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.currentTime = 0;
thissound.Play();
}
function StopSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.Stop();
}
This is my code to play a audio file,
onmouseover="EvalSound('sound1')" onmouseout="StopSound('sound1')"
It is currently working on hover, however when i go back to the image that it plays under it doesnt go back to the beginning, it continues playing
The <embed> tag is the old way to embed multimedia. You really ought to be using the new HTML5 <audio> or <video> tags as they are the preferred and standardized way to embed multimedia objects. You can use the HTMLMediaElement interface to play, pause, and seek through the media (and lots more).
Here is a simple example that plays an audio file on mouseover and stops it on mouseout.
HTML:
<p onmouseover="PlaySound('mySound')"
onmouseout="StopSound('mySound')">Hover Over Me To Play</p>
<audio id='mySound' src='http://upload.wikimedia.org/wikipedia/commons/6/6f/Cello_Live_Performance_John_Michel_Tchaikovsky_Violin_Concerto_3rd_MVT_applaused_cut.ogg'/>
Javascript:
function PlaySound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.play();
}
function StopSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.pause();
thissound.currentTime = 0;
}
For more information, check out the MDN guide for embedding audio and video
I had the same question, about starting and stopping audio. I use jQuery without any other plugins. My code is for mousedown and mouseup, but could be changed to other actions.
HTML
<div class="soundbutton">
cool wind sound
</div>
<audio id="wind-sound" src="wind-sound/wind.mp3">
Javascript
$('.soundbutton').on('mousedown', function () {
playWind(); //start wind sound
})
.on('mouseup', function () {
stopWind(); //stops the wind sound
});
// my full functions to start and stop
function playWind () { //start wind audio
$('#wind-sound')[0].volume = 0.7;
$('#wind-sound')[0].load();
$('#wind-sound')[0].play();
}
function stopWind () { //stop the wind audio
$('#wind-sound')[0].pause();
$('#wind-sound')[0].currentTime = 0; //resets wind to zero/beginning
}
<html>
<script>
function stopAudio() {
player.pause();
player.currentTime = 0;
}
</script>
<body>
<audio id="player" src="(place audio here)"></audio>
<div>
<button onclick=" stopAudio()">Stop</button>
</div>
</body>
</html>
//End Note: you must look at your audio id as mine is named "player"
this is the reason it is not working look at your css and your html
very closely in your lines. The other thing you must be careful about
is your call function as mine is stated as stopAudio() yours could be
named different. The function only works with css if you use your call
method properly.