|
|
发表于 2023-1-22 12:40:36
|
查看: 153 |
回复: 0
- </html>
- <head>
- <link href="https://vjs.zencdn.net/7.21.1/video-js.css" rel="stylesheet" />
-
- <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
- <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
- </head>
- <style>
- .vjs-paused .vjs-big-play-button,
- .vjs-paused.vjs-has-started .vjs-big-play-button {
- display: block;
- }
- .video-js .vjs-big-play-button{
- font-size: 2.5em;
- line-height: 2.3em;
- height: 2.5em;
- width: 2.5em;
- -webkit-border-radius: 2.5em;
- -moz-border-radius: 2.5em;
- border-radius: 2.5em;
- background-color: #73859f;
- background-color: rgba(115,133,159,.5);
- border-width: 0.15em;
- margin-top: -1.25em;
- margin-left: -1.75em;
- }
- /* 中间的播放箭头 */
- .vjs-big-play-button .vjs-icon-placeholder {
- font-size: 1.63em;
- }
- /* 加载圆圈 */
- .vjs-loading-spinner {
- font-size: 2.5em;
- width: 2em;
- height: 2em;
- border-radius: 1em;
- margin-top: -1em;
- margin-left: -1.5em;
- }
- /* 点击屏幕切换播放/暂停 */
- .video-js.vjs-playing .vjs-tech {
- pointer-events: auto;
- }
- </style>
- <body>
- <video
- id="my-video"
-
- class="video-js vjs-big-play-centered"
- controls
- preload="auto"
- width="1024"
- height="580"
- poster="MY_VIDEO_POSTER.jpg"
- data-setup="{}"
-
- >
- <source src="1.mp4" type="video/mp4" />
- <source src="MY_VIDEO.webm" type="video/webm" />
- <p class="vjs-no-js">
- To view this video please enable JavaScript, and consider upgrading to a
- web browser that
- <a href="https://videojs.com/html5-video-support/" target="_blank"
- >supports HTML5 video</a
- >
- </p>
- </video>
-
- <script src="https://vjs.zencdn.net/7.21.1/video.min.js"></script>
- </body>
- <html>
|
|
