Control windows media player javascript chrome

However, there are differences in how elements are exposed:. When you distribute your application, be sure to install AxInterop. You will also need to make sure that the required Windows Media Player version is installed on the user's computer.

NET Solution. Skip to main content. This browser is no longer supported. Download Microsoft Edge More info. Contents Exit focus mode. Please rate your experience Yes No. The min attribute on both is set to zero, and the value attribute indicates the current value of both elements. They also need a max attribute which will be set to the duration of the video in seconds which is from video.

We can do this in the initializeVideo function, but we need to select the elements first:. Now, the range for both the progress element and range input is between zero and the video duration in seconds as indicated by the min and max attributes on both elements.

Create a new updateProgress function below:. Then add a new timeupdate event listener on the video element below the first one:. Refresh your browser and try it out.

You should see the progress bar update as the video is being played. Most video players allow you to click on the progress bar to jump to a particular point in the video, and ours is not going to be any different. First, we need to select the tooltip element:. Then add a function to display the timestamp in the tooltip element when the cursor is over the progress bar:.

This function uses the position of the cursor on the seek element to roughly work out where in the range input the user is hovering on, and stores the position in a data-seek attribute while updating the tooltip to reflect the timestamp at that position. Hook up the updateSeekTooltip function to the mousemove event on the seek control to see it the effect in action:. Once the value of seek element is changed either by clicking or dragging the thumb, we want the video to jump to the time set in the data-seek attribute.

Create a new skipAhead function below updateSeekTooltip :. This function will be executed when the value of the seek element changes can be monitored using the input event. We then get the value of the data-seek attribute and check if it exists. If the data-seek property does not exist on mobile for example , the value of the seek element is used instead.

In the above snippet, you can find markup for all the volume related controls. The first thing we need to do is update the volume of the video when the value of the volume element changes. We also need to update the icon to reflect the current volume of the video. As you can see, volume input ranges from 0 to 1, and each step in the input increases the volume by 0.

Next, create a new updateVolume function to update the volume as soon as the volume input is changed:. At this point, you will notice the volume decrease when you slide the range to the left, and vice versa. We need to add another function to update the icon whenever the volume changes:. When this function executed, all the icons are hidden then one of them is displayed depending on which condition evaluates to true.

We can run updateVolumeIcon each time the volume changes by listening for the volumechange event as follows:. One more thing we need to add is the ability to mute and unmute the video by clicking on the volume icon. This function toggles the state of the muted property on the video to true or false. When the video is muted, the volume is stored in a data-volume attribute on the volume element, so that when the video is unmuted, we can restore the state of the volume to its previous value.

This was a much better implementation. But thanks for your suggestion. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog. Stack Gives Back Safety in numbers: crowdsourcing data on nefarious IP addresses. Featured on Meta. New post summary designs on greatest hits now, everywhere else eventually.

Linked 0. Related Hot Network Questions. Question feed. Stack Overflow works best with JavaScript enabled.