Video Stop video with CSS Chi tiết

container for the element also requires some specific settings; it is set to be much wider than the other child elements and its cursor value is set to be pointer:

.controls .progress
cursor:pointer;
width:75.390625%;

Buttons

The first major styling task to tackle is to make the video control’s buttons actually look like and act like real buttons.

Each button has some basic styling:

.controls button
border:none;
cursor:pointer;
background:transparent;
background-size:contain;
background-repeat:no-repeat;

By default, all elements have a border, so this is removed. Since background images will be used to display appropriate icons, the background color of the button is set to be transparent, non-repeated, and the element should fully contain the image.

Simple :hover and :focus states are then set for each button that alters the opacity of the button:

.controls button:hover, .controls button:focus
opacity:0.5;

To obtain appropriate button images, a set of không lấy phí common control set icons was downloaded from the web. Each image was then converted to a base64 encoded string (using an trực tuyến base64 image encoder), since the images are quite small, the resultant encoded strings are quite short.

Since some buttons have dual functionality, e.g. play/pause, and mute/unmute, these buttons have different states that need to be styled. As mentioned earlier, a `data-state` variable is used to indicate which state such buttons are currently in.

For example, the play/pause button has the following background image definitions (the full base64 strings have been omitted for brevity):

.controls button[data-state=”play”]
background-image: url(‘data:image/png;base64,iVBORw0KGgoAAA … ‘);

.controls button[data-state=”pause”]
background-image: url(‘data:image/png;base64,iVBORw0KGgoAAA … ‘);

When the data-state of the button is changed, the appropriate image will also be changed. All the other buttons are treated in a similar way.

Progress bar

The element has the following basic style set up:

.controls progress
display:block;
width:100%;
height:81%;
margin-top:0.125rem;
border:none;
color:#0095dd;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;

Like the elements, also has a default border, which is removed here. It is also given a slight rounded corner for aesthetic reasons. The color property is also defined here as Internet Explorer uses this defined color for styling the progress bar’s background color as it increases.

As mentioned in the previous article, there is a fallback provided for browsers that do not tư vấn the element; this also needs to be styled appropriately:

.controls progress[data-state=”fake”]
background:#e6e6e6;
height:65%;

.controls progress span
width:0%;
height:100%;
display:inline-block;
background-color:#2a84cd;

A .data-state class is also used here when a element is being “faked”; when it’s in this state the background color needs to be set. The internal element used as the actual progressing part of the faked progress bar has its width initially set to 0% (it is updated via JavaScript) and it also has its background color set.

There are some browser-specific properties that need to be set to ensure that Firefox and Chrome use the required color for the progress bar:

.controls progress::-moz-progress-bar
background-color:#0095dd;

.controls progress::-webkit-progress-value
background-color:#0095dd;

Although the same properties are set to the same value, these rules need to be defined separately, otherwise Chrome ignores it.

JavaScript

That’s really it for the immediate styling; the next task is making a number of JavaScript changes to ensure that everything works as expected.

Control visibility

The first change is simple: the data-state for showing the video controls when JavaScript is available to the browser now needs to be set:

// Display the user defined video controls
videoControls.setAttribute(‘data-state’, ‘visible’);

Progress bar tư vấn

A check also needs to be made to set up the “fake” progress bar if the browser doesn’t tư vấn the element:

var supportsProgress = (document.createElement(‘progress’).max !== undefined);
if (!supportsProgress) progress.setAttribute(‘data-state’, ‘fake’);

Button functionality

This section looks at the JavaScript required for implementing the button functionality.

Play/Pause and Mute

Now that the buttons actually look like buttons and have images that indicate what they do, some changes need to be made so that the “dual functionality” buttons (such as the play/pause button) are in the correct “state” and display the correct image. In order to facilitate this, a new function is defined called changeButtonState(), which accepts a type variable indicating the button’s functionality:

var changeButtonState = function(type)
// Play/Pause button
if (type == ‘playpause’)
if (video.paused
// Mute button
else if (type == ‘mute’)
mute.setAttribute(‘data-state’, video.muted ? ‘unmute’ : ‘mute’);

This function is then called by the relevant sự kiện handlers:

video.addEventListener(‘play’, function()
changeButtonState(‘playpause’);
, false);
video.addEventListener(‘pause’, function()
changeButtonState(‘playpause’);
, false);
stop.addEventListener(‘click’, function(e)
video.pause();
video.currentTime = 0;
progress.value = 0;
// Update the play/pause button’s ‘data-state’ which allows the correct button image to be set via CSS
changeButtonState(‘playpause’);
);
mute.addEventListener(‘click’, function(e)
video.muted = !video.muted;
changeButtonState(‘mute’);
);

You might have noticed that there are new handlers where the play and pause events are reacted to on the video. There is a reason for this! Even though the browser’s default video control set has been turned off, many browsers make them accessible by right clicking on the HTML5 video. This means that a user could play/pause the video from these controls, which would then leave the custom control set’s buttons out of sync. If a user uses the default controls, the defined Media API events such as play and pause are raised so this can be taken advantage of to ensure that the custom control buttons are kept in sync. To ensure this, a new click handler needs to be defined for the play/pause button so that it too raises the play and pause events:

playpause.addEventListener(‘click’, function(e) video.ended) video.play();
else video.pause();
);
Volume

The alterVolume() function, called when the player’s volume buttons are clicked, also changes it now calls a new function called checkVolume():

var checkVolume = function(dir)
if (dir)
var currentVolume = Math.floor(video.volume * 10) / 10;
if (dir === ‘+’)
if (currentVolume < 1) video.volume += 0.1;

else if (dir === ‘-‘)
if (currentVolume > 0) video.volume -= 0.1;

// If the volume has been turned off, also set it as muted
// Note: can only do this with the custom control set as when the ‘volumechange’ sự kiện is raised, there is no way to know if it was via a volume or a mute change
if (currentVolume <= 0) video.muted = true;
else video.muted = false;

changeButtonState(‘mute’);

var alterVolume = function(dir)
checkVolume(dir);

This new checkVolume() function does the same thing as the alterVolume() but it also sets the state of the mute button depending on the video’s current volume setting. checkVolume() is also called when the volumechange sự kiện is raised:

video.addEventListener(‘volumechange’, function()
checkVolume();
, false);
Progress bar

A small change also needs to be made to the click handler for the element. Since the enclosing

element now has position:relative set on it, the calculations made by this click handler are incorrect. It now also needs to take into account the offset position of the parent element:

progress.addEventListener(‘click’, function(e)
var pos = (e.pageX – (this.offsetLeft + this.offsetParent.offsetLeft)) / this.offsetWidth;
video.currentTime = pos * video.duration;
);
Fullscreen

The FullScreen implementation hasn’t changed.

Responsive styling

Now that the player has its basic look and feel taken care of, some other styling changes involving truyền thông queries need to be made in order to make it responsive.

The player currently works fairly well until displayed on a “medium” screen (e.g. 1024px/64em) or smaller. In this case, the margins and padding on the

element need to be removed so that all the available space is taken advantage of, and the buttons are a bit too small so this needs to be altered by setting a new height on the element that has the .controls class set on it:

@truyền thông screen and (max-width:64em)
figure
padding-left:0;
padding-right:0;
height:auto;

.controls
height:1.876rem;

This works well enough until it is viewed on a smaller screen (680px/42.5em), so another breakpoint is made here. Since the height of the .controls class element will now vary, a fixed height is no longer required it is therefore set to auto. The definitions for the elements within the .controls element now also need to changed:

@truyền thông screen and (max-width:42.5em)
.controls
height:auto;

.controls > *
display:block;
width:16.6667%;
margin-left:0;
height:2.5rem;
margin-top:2.5rem;

.controls .progress
position:absolute;
top:0;
width:100%;
float:none;
margin-top:0;

.controls .progress progress
width:98%;
margin:0 auto;

.controls button
background-position:center center;

The .progress container is now moved to the top of the control set via position:absolute, so it and all the buttons need to be wider. In addition, the buttons need to be pushed below the progress container so that they are visible.

Reply
0
0
Chia sẻ

Video full hướng dẫn Share Link Down Stop video with CSS ?

– Một số Keywords tìm kiếm nhiều : ” Review Stop video with CSS tiên tiến và phát triển nhất , Share Link Cập nhật Stop video with CSS “.

Thảo Luận vướng mắc về Stop video with CSS

Quý khách trọn vẹn có thể để lại phản hồi nếu gặp yếu tố chưa hiểu nhé.
#Stop #video #CSS Stop video with CSS