The content in the main text is incorrect and will cause bugs. When loading from the homepage, the player will not work. Below is what I paid $50 for someone to help me modify, shared for free with those in need. The player effect is very good and worth recommending!
Pros:
The color tone is quite matching
The player adapts to the screen from the beginning, rather than from small to large
More features
To publish, just add a video tag:
<video controls>
<source src="https://xxxx/test.mp4" type="video/mp4">
</video>
Add in the head, it’s best to download CSS and JS to your own CDN.
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css">
<script src="https://cdn.openfa.net/css/plyr.js"></script>
Add in the main body
<script type="text/javascript">
let curUrl = "";
setInterval(() => {
let newUrl = location.href;
if (curUrl !== newUrl) {
curUrl = newUrl
if (document.querySelector("video")) {
new Plyr('video')
}
}
}, 10)
</script>
Final effect:
You can also set subtitle clarity, etc.
