网站介绍

这是一个使用Video.js播放器的视频播放网站示例。Video.js是一个开源的HTML5视频播放器,提供了丰富的功能和定制选项,适用于各种规模的项目。

播放器设置

在上述代码中,我们定义了一些CSS样式来设置视频播放器的尺寸和布局。.video-js类用于设置播放器容器的宽度和高度,.vjs-fluid:not(.vjs-audio-only-mode)选择器用于在非音频模式下为播放器添加适当的内边距,以确保视频内容完全覆盖整个容器。.fluid-width-video-wrapper类用于将视频包装在一个自适应的容器中,确保视频占据整个页面宽度。最后,通过sessionStorage获取一个名为litespeed_docref的值,并将其作为文档的referrer属性返回。

访问方式

要使用此示例,你需要创建一个包含以下内容的HTML文件:

<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
</head>
<body>
<div class="video-js">
<div class="vjs-fluid vjs-big-play-centered">
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup='{}'>
<source src="your-video-url.mp4" type="video/mp4" />
</video>
</div>
</div>
<script src="https://vjs.zencdn.net/7.8.4/video.min.js"></script>
<script>
var player = videojs('my-video');
player.ready(function() {
console.log('播放器已准备好');
});
</script>
</body>
</html>

请替换your-video-url.mp4为你要播放的实际视频URL。然后,将该HTML文件保存到本地计算机上,并使用现代浏览器打开该文件,即可看到使用Video.js播放器的自定义视频播放界面。