html5 - video control bar different on chrome

Question

The same video tag is used. The control bar on my own web page is like this, without the full screen and total time

But I looked at the second shot and didn’t do anything to deal with it. The buttons were all

It is indeed possible to add styles to the missing buttons, but there is no processing. Why are the buttons different?

Answer 1

There may be some reasons:

1. Except for the download button, everything can be hidden through css. You can check whether your css code has these operations.

2. Different video formats will also cause display differences, and m3u8 will not display the total duration.

3. Differences in browser versions

4. It is related to the current width of the page, some buttons will be hidden by the browser

5. You can inspect the elements and specifically compare whether there are different attributes on the video tag

This is my Chrome 60.0.3100.0 (official version) (32-bit)

The following is the effect of reviewing the code after I zoom out the screen

You can check specifically what is hidden in the shadow dom