need:
1. The player can support uploading the default cover image
2. The length of the progress bar of the player should be longer, as long as the length of the player, or beautified in other ways
First need 1.播放器可以支持上传默认封面图片a solution:
1. The first method can directly add the poster attribute directly in the video tag
<!DOCTYPE HTML>
<html>
<body>
<video src="/i/movie.ogg" controls="controls" poster="../../imgs/poster.png">
your browser does not support the video tag
</video>
</body>
</html>
2. The front end uses js to add the poster attribute and the image path corresponding to the attribute to the video tag:
<!DOCTYPE HTML>
<html>
<body>
<video src="/i/movie.ogg" controls="controls" id="myVideo">
your browser does not support the video tag
</video>
</body>
</html>
<script type="text/javascript">
const thisVideo = document.getElementById('myVideo');
const thisVideoImgSrc = "img/poster.png"
thisVideo.setAttribute('poster',thisVideoImgSrc)
</script>
The picture below is the display picture of the normal video label (the customer said it was not good-looking and asked to beautify the style of the video player)
Take as 2.播放器的进度条长度拉长些,与播放器长度一样长an example to modify the style
Steps:
1. First, you need to check the internal structure of the video tag by using the internal settings of the browser. Under normal conditions, the browser F12 captures the video player as shown in the figure below. We cannot see the internal structure of the video, so we cannot modify the style of the video player. Revise
2. Under Google Chrome, find F12 Developer Tools -> Settings button -> Preferences -> Show user agent and check shadow DOM
3. Then right-click the video player -> inspect, you will see the content, you can see the internal structure of the video, so that you can modify the style according to the class name
4. Modify the progress bar length problem code of the video player:
video::-webkit-media-controls-timeline {
padding-left: 0px!important;
padding-right: 0px!important;
}
After modification, the style is as follows (I feel that the book is still a little bit far away from the good-looking, very helpless!)
