I am using a jquery code to automatically run the video on desktops, with all versions of safari on mac it works except the the latest one which is high sierra, i am trying every possible combination to run it, no matter how apple sees it,
I had the code which mostly works
function startVideoIfNotStarted () {
window.setTimeout(function(){
var play = document.getElementById("player");
play.addEventListener("load",function(){
player.play();
})
}, 800);
}
startVideoIfNotStarted();
Now i am trying to use the click event to trigger itself but i am little bit confused on the code how should i do
setTimeout(function() {
var play = document.getElementById("player");
play.addEventListener("click",function(){
player.play();
})
}, 1000);
Not exactly sure what you're looking to do, but if you're trying to simulate a click on the video to play it, you could try something like:
$(document).ready(function(){
$('#player').trigger('click');
//handle the click event
$('#player').on('click',function(){
play(); //or whatever you're trying to accomplish here
});
});
If it's anything like a youtube video, just triggering the click on it should play it I believe?
Related
I'm trying to automatically play video on scroll down, (similar to tiktok).
On the computer, everything works fine. But when I scroll down on mobile, I get "NotAllowedError". This is because mobile doesn't allow autoplay when video is not muted (I checked the code if video is muted, and it works). So I need it to play automatically on scroll unmuted video.
So to play video on mobile, there has to be some user interaction.
I created this code:
useEffect(() => {
var video = document.getElementById("video1");
video.addEventListener("scroll", handleScroll, true);
return () => {
window.removeEventListener("scroll", handleScroll, true);
};
});
Though when I scroll it doesn't register and doesn't run the handleScroll code.
This code works:
useEffect(() => {
window.addEventListener("scroll", handleScroll, true);
return () => {
window.removeEventListener("scroll", handleScroll, true);
};
});
But it doesn't work on mobile. It gives the "NotAllowedError", which I believe is because it's using "window." instead of "video." (video1 is the id tag of the video). So it's not reading the window scroll as an action (that's my best guess right now).
So I need to make the code work for the "video.addEventListener..." code actually pick up the scrolling action from the user.
I have heard to fix this, to delete the "height:100%" values in CSS. This didn't work. I actually deleted all the CSS code for both the overall code and the video code, and it still didn't trigger "video.addEventListener..." on scroll.
I am looking to get this working, when I scroll, to play video. Any knowledge/experience is appreciated.
EDIT:
From what I've seen after posting this, this idea won't work. At this point I'm trying to find a way to play and then pause all videos at once after one click event.
Looks like you have not passed dependency array (2nd argument to 'useEffect')
useEffect( () => {
// add event listener
// return event listener
}, []);
Trying to call the vimeo api to pause video on a click event to hide it. And, on clicking to reveal the video again, play the video from its paused position.
There are various related questions on here, I can't find an answer to the simple "how to pause". I'm a jquery novice and can't make heads or tails of the froogaloop documentation.
Here's a FIDDLE, and my current jquery script to hide the video
$(document).click(function (event) {
if (!$(event.target).hasClass('click')) {
$('#video').hide();
}
});
which hides it when an element without the "click" class is clicked. But the video plays on in the background. Froogaloop is loaded in the fiddle. Thanks everyone
Here's an updated FIDDLE that makes pause/play work as I'd imagined. Click the image to play the video; click outside or on empty space (you control this with classes) to pause it; click image again to play from paused position. Simple, no buttons, no excess jquery or froogaloop code.
Putting this here for those who might benefit from it. And a +1 to mbrrw for getting me started.
var iframe = $('#video iframe')[0];
var player = $f(iframe);
$('.showvideo').on('click', function(){
$('#video').show();
$('.image').hide();
player.api('play');
});
$(document).click(function (event) {
if (!$(event.target).hasClass('click')) { //if what was clicked does not have the class 'click' (ie. any empty space)
$('#video').hide();
$('.image').show();
player.api('pause');
}
});
Remember to append api=1 to the vimeo link. And the url must be https, not http.
froogaloop can be a pain in the arse.
The code to get you started is here:
https://developer.vimeo.com/player/js-api#universal-with-froogaloop
I've adapted that to get it working i think how you expect here:
https://jsfiddle.net/fLe5xs4v/
Setting it up like so:
var iframe = $('#video iframe')[0];
var player = $f(iframe);
Note that if you change the text in the play and pause buttons you will break this code:
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
Give it a shot it should get you going in the right direction at least. Good luck!
I've got this plugin which applies different style to html5 <audio> element and provides flash fallback to browsers that don't support .mp3 file format. Problem I encountered is that once you start playing one song, and then click play on any other song, all of them will play at the same time, which is bad user experience.
I was trying to figure out how to edit plugin to make it only play one song at a time, so say if user listens to one song and then click play on other, first one should pause, and so on.
I'm not entirely sure, but I think something need's to be edited along these lines:
playPause: function() {
if (this.playing) this.pause();
else this.play();
},
However, there are various places in the plugin which seem to deal with playing and pausing song, so I'm not sure that this is exact correct line for this. I'm still very new to jQuery, and can't entirely figure out how this big audio library works, I've been reading through code comment's , but still am unable to figure this out.
Full code of the plugin is available here: http://freshbeer.lv/mg/js/audio.min.js Official plugin website: http://kolber.github.io/audiojs/
You can visit my demo page to see the issue, just click play on several players and you will see that they all play at the same time: http://freshbeer.lv/mg/index.html
Use the addEventListener and the play event. This pauses all players except the one that the play button has been pressed on.
audiojs.events.ready(function () {
var as = audiojs.createAll();
$('audio').each(function () {
var myAudio = this;
this.addEventListener('play', function () {
$('audio').each(function () {
if (!(this === myAudio)) {
this.pause();
}
});
});
});
});
Okay, that's phrased awkwardly, but what I'm looking for is a script that checks, onclick if a video is playing, and if it is, don't start playing it again. It's for a page that has six thumbs in an array that each play a video, and you're not supposed to be able to restart the video(which means its acting like its not selected)how would I be able to do this?
To prevent clicking from doing anything to the video you can do this:
$("video").click(function(e) {
e.preventDefault();
return false;
});
To determine if the video is playing or not you can read this previous question:
Detect if HTML5 Video element is playing
So you'll want to read that and then do something like:
$("video").click(function(e) {
if (videoStatus === "playing") {
e.preventDefault();
return false;
}
});
Let me know if you're not using jQuery and I'll update my answer to use getElementsByTagName.
First of all, I can't upgrade to a newer version of the player, because I need the displayclick=fullscreen option to work, and it doesn't with version 5.
So, what I need to do is this: have the player auto-start with no volume and no controls on the page (this works just fine), and when the user clicks the screen the player must go full-screen and the volume must turn on.
The problem is all Javascript interaction seems to be completely ignored by the player, and I really can't see where the problem is.
When the page is loaded, I embed the player:
var so = new SWFObject('path_to_player.swf','div_id','200','120','10');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','sameDomain');
so.addParam('bgcolor','#000000');
so.addParam('flashvars','file=path_to_playlist.xml&autostart=true&displayclick=fullscreen&controlbar=none&volume=0&icons=false&image=path_to_thumb.jpg');
so.write('div_id');
This seems to work just fine, the player is loading.
Then I add the event listeners:
var player = null;
function playerReady(p) {
player = document.getElementById(p.id);
addListeners();
}
function addListeners() {
if (player) {
console.log('add the listener');
console.log(player.getConfig().volume);
player.addControllerListener("RESIZE", "checkResize");
} else {
setTimeout("addListeners()", 100);
}
}
function checkResize(obj) {
console.log('resized');
if (obj.fullscreen) {
player.sendEvent("VOLUME", "60");
} else {
player.sendEvent("VOLUME", 0);
}
}
The "add the listener" message gets displayed in the console, but the second one, with the player's volume doesn't, and neither does the "resized" one when the player enters or exits fullscreen (and, obviously, the volume doesn't turn on).
I've tried other listeners, for both model and controller, and they don't seem to work. Sending events doesn't work either.
I've tried running just the code for the player separately, to make sure there are no other things interfering with the code, but I still have the same problem.
Well, it seems I've found the answer myself. Upgrading to a newer version of swfobject and using swfobject.embedSWF() seems to work just fine.