I stumbled across this WoW website and, inspecting some elements, discovered that the "spinning characters" are WebM / MP4 videos. Go to the Characters section, pick a character, and press this button. This will load up a video of them spinning.
These videos can rewind and fast-forward depending on the direction you drag your cursor (Left = reverse, Right = fast-forward).
My question is simple, what function does that? Is it JavaScript?
Thanks in advance.
It's JavaScript, and this is the code they are using:
//this is for video on stage
CharacterSelect.ui.modelVideo = ModelVideo.build($(".model-video"));
//and this is when the page is ready
$(document).ready(function() {
if (ModelVideo.supportsVideo && !$('html').hasClass('ie')) {
var modelVideo = videoController.create(".model-video");
}
});
Related
In advance, my apologies for my bad english.
I'm using WordPress with Elementor.
I wan't to have an autoplay on my video only when it is in viewport.
I've tried this code :
jQuery(document).ready(function ($) {
//To check if element is visible
function checkVisible(elm) {
var rect = elm.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}
//To play-pause self-hosted videos in elementor only when it's visible
$(window).scroll(function () {
$(".elementor-video").each(function (i, obj) {
if (checkVisible(obj)) {
obj.play();
} else
obj.pause();
});
});
});
It's works BUT ONLY if the user has already click on play.
How to improve this ?
In advance, thanks.
Well i will prefer keeping it simple. Below I have mentioned the complete process and will be adding the image as well to make it simple for you. This is from a st courier tracking website which is displaying tracking results and showing it to the customers so whenever the customer comes the video is auto played . How are they doing it.
If you are using elementor then simply
Go to the page
Edit with Elementor
Open Navigator
Click on Video (The one which you want autoplay on)
5.Now at the right hand side click on "Content"
Under the video options select or toggle on Autoplay
Hopefully it helps.
Elementor navigator
Toogle on option
Browsers do not allow autoplay for video when is not muted.
I need to make an audio player using HTML/CSS and JS. The player should be simple, with play button and progress bar. However I need to implement a way that users can add tags on the audio file (on progress bar). Something like a player from SoundCloud. Where there is a tiny line on bar at specified time, and when you hover that, a popup window comes out with some message.
Is it possible with HTML5's <audio></audio> tags to get millisecond representation using JavaScript?
Or the best idea is to create a custom audio player?
EDIT
I am following this example -> http://alexkatz.me/posts/building-a-custom-html5-audio-player-with-javascript/
And there is a function which I am trying to edit. So when I do:
function moveplayhead(event)
{
var newMargLeft = event.clientX - getPosition(timeline);
console.log(newMargLeft);
if (newMargLeft >= 0 && newMargLeft <= timelineWidth)
{
playhead.style.marginLeft = newMargLeft + "px";
}
if (newMargLeft < 0)
{
playhead.style.marginLeft = "0px";
}
if (newMargLeft > timelineWidth)
{
playhead.style.marginLeft = timelineWidth + "px";
}
}
I get in console number of seconds. How can I place small red label (for example) to mark this area. And then add a popup..
You should be able to add a progressing line on your developed audio player with below logic steps:
Create an audio player function (javascript)
Create a timer function (javascript)
Specify an intervall where you want to "tap-out" the trigger that will indicate to move the progress line. (javascript)
Create the transition sliding. (Javascript or CSS)
Create stacking layer using z-index (so you can have your audio player on one layer, and the progressing line on a layer ontop the audio player.) - (CSS)
Since the interaction between each step will probably be needed to work relatively fast, you should stay in javascript as much as possible, without to many interaction with CSS and HTML.
I am working on what will hopefully be my first create.js project in Animate CC at my current employer.
I am trying to load in a .mp4 into a Bitmap object, using
HTML5ElementForVideo = document.createElement('video');
HTML5ElementForVideo.src = 'bridge-animation-resized-794x652.mp4';
HTML5ElementForVideo.autoplay = false;
video = new createjs.Bitmap(HTML5ElementForVideo);
video.x = 110.00;
video.y = 42.5;
stage.addChild(video);
..which works okay, and as expected. In the video, there are a series of steps which we would like the user to be able to go between, using "Previous" and "Next" step buttons.
I assumed that navigation wise, I would be able to use something along the lines of:
[video].gotoAndPlay(x)
To move to the right frame in the video. However, this does not seem to work or be supported? I only seem to be able to play the video or stop it with .play and .pause?
Any suggestions, please?
Dave
The video is not an Animate or CreateJS object - only the Bitmap drawing it to the stage is. Check out the HTML Video API for how to control it. To set the position, use the currentTime property to control the video position.
Hope that helps!
I was wondering how I could control/edit the status bar of an html5 video controller (i think that's what its called.. Its the bar that has your current position in the video)?
What I'm trying to do is create a program that will enable a user to pick part of the video and loop it over and over again.
Once a user hits a button, there will be 2 slider buttons underneath the progress bar, (one for beginning and ending) and the user can select the beginning and ending times by sliding the sliders and having the program highlight the portion they selected.
What I am confused about is how the video element (progress bar) is effected by the java script, and how to make the selection portion of the bar. (the highlighted section)
any help would be awesome.
here are pictures of what I am trying to explain
http://imgur.com/a/XX1e3#0
Thanks Guys
The progress bar of a <video> element isn't really "affected" by JS, per se...
The progress bar is little more than a <div> with coloured <div>s inside (to show progress).
The video object (the JS object) has properties and methods which control playback/position, and fire update events to allow you to react.
<video id="my-video" src="/media/my-video.mp4"></video>
Then the JS properties of that object are pretty straightforward:
var video = document.querySelector("#my-video");
video.play(); // plays
video.pause(); // pauses
video.currentTime; // gets or sets the current playback time
video.duration; // gets the length of the media file
// stop doesn't exist, but it's easy enough to make
video.stop = function () { video.pause(); video.currentTime = 0; };
video.addEventListener("timeupdate", function () {
/* more of the video has played */
});
All you really need to do here, is spend some time thinking about how the bar itself will operate.
If 100% of the bar is equal to 100% of the video's duration, then as users click on other divs to move them around, you can figure out where those cursors are on the time-bar...
eg: your bar is 500px, your video is 300 seconds.
The user sets one cursor to 100px from the left of the bar (100px/500px == 0.2 * 300s == 60s).
So now you know that when you loop back around, you're going to set video.currentTime = 60;.
How do you know when to do that?
video.addEventListener("timeupdate", function () {
var end_percent = end_cursor_pos_px / bar_width_px,
start_percent = start_cursor_pos_px / bar_width_px,
end_time = video.duration * end_percent;
if (video.currentTime > end_time) {
/* set video.currentTime to the "start_time" */
video.currentTime = video.duration * start_percent;
}
});
As a performance consideration, you should update the start-percent/end-percent whenever the user moves either cursor.
Then, when the video tells you it's played more, you should calculate the percentage of the duration.
Note that you might not have the full duration available to you until the video has played a bit (or until it's played all the way through, even).
There is a "loadedmetadata" event you can listen to, that will tell you when you've got it all.
But still, if only 30 seconds have loaded, 50% of 30 seconds is still 50%.
If you want that not to be the way it works, then you need to work around it, either by waiting for that event (even if the video has to be 100% done), or by sending it in a JSON request, or reading it from headers in an AJAX "HEAD" request.
The math for the positions of the cursors and bar is pretty easy, too.
As long as you guarantee that the cursors stay within the bounds of the bar, (and the user hasn't scrolled the window to the point where part of the bar is off-screen, left or right), it's just going to be:
var start_cursor = startEl.getBoundingClientRect(),
end_cursor = endEl.getBoundingClientRect(),
scrub_bar = scrubEl.getBoundingClientRect();
var start_percent = (start_cursor.left - scrub_bar.left) / scrub_bar.width,
end_percent = (end_cursor.left - scrub_bar.left) / scrub_bar.width;
If they have scrolled left/right, then you just want to add window.pageXOffset to those values.
There isn't much more to it.
Just be sure to update the start/end percent any time a cursor gets moved, and check your playback percentage against the end-percent, and update the currentTime, any time it's gone past (the callbacks happen several times a second).
Hope that helps a little.
Im fairly new to JS... please be gentle.
Can anyone suggest a way to pull off a delayed autoscroll effect on a block of text?
It's important to mention that my ultimate goal is to use this on a popup modal window, on iOS devices. And because iOS browsers do not display the scrollbar until user interaction, I am resorting to the auto-scroll.
In effect: I would like the page to load, wait a couple of seconds, then have begin to slowly scroll down. The scroll is intended to be a hint to the user that there is more content available, therefore if there is any way to stop or temporarily pause the auto-scroll on user interaction- that would be optimal.
I have searched for my answers a couple of hours now, but between not being able to initialize the found code to my design (again, I'm fairly green), and not being able to find a solution that achieves everything I need - I am turning to brighter minds.
I have set up a fiddle with my HTML and CSS: http://jsfiddle.net/zfMsQ/
Any help is greatly appreciated!
ps: This is my very first post on StackOverflow :)
My code:
Extensive. Linked above.
Here you go: http://jsfiddle.net/zfMsQ/3/
var roll = true;
var max = 0;
var text = $("#content");
function scroll() {
text.scrollTop(text.scrollTop() + 1)
var top = text.scrollTop()
if (top > max) {
max = top
if (roll) {
setTimeout(scroll, 50)
}
}
}
text.on("mouseenter mouseover mousedown", function(){
roll = false;
})
setTimeout(scroll, 2000)