<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet"> <script src="https://vjs.zencdn.net/7.15.4/video.js"></script> </head> <body> <video id="my-video" class="video-js" controls preload="auto"></video> <script> var player = videojs('my-video'); // 动态设置视频源 function setVideoSource(src) { player.src({ src: src, type: 'video/mp4' }); player.load(); player.play(); } // 示例调用 setVideoSource('path/to/video.mp4'); </script> </body> </html>这个示例中可以给视频添加一个图片吗
时间: 2024-04-14 09:31:58 浏览: 71
是的,你可以在 Video.js 的示例中为视频添加一个封面图片。为视频添加封面图片可以在视频加载之前显示一张图片,提供更好的用户体验。
要为视频添加封面图片,你可以在 `<video>` 元素中添加一个 `<poster>` 属性,并指定图片的路径。以下是修改后的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.15.4/video.js"></script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" poster="path/to/poster-image.jpg"></video>
<script>
var player = videojs('my-video');
// 动态设置视频源
function setVideoSource(src) {
player.src({ src: src, type: 'video/mp4' });
player.load();
player.play();
}
// 示例调用
setVideoSource('path/to/video.mp4');
</script>
</body>
</html>
```
在上面的代码中,我们在 `<video>` 元素中添加了一个 `poster` 属性,并设置为封面图片的路径。你只需要将 `"path/to/poster-image.jpg"` 替换为你实际使用的图片路径。
这样,当页面加载时,视频将显示封面图片,直到用户开始播放视频。一旦用户点击播放按钮或其他操作触发播放事件,封面图片将被替换为实际的视频内容。
请确保封面图片的路径正确,并且图片文件的格式符合浏览器支持的格式。
希望这个示例对你有帮助!如果你有任何其他问题,请随时提问。
阅读全文