如题,我在用video.js做一个小小的播放器,但是样式一直失效,查看Network却显示CSS请求正常。
我完全学着网上其他用这玩意的引入的!!!
Code:
<!DOCTYPE html>
<html>
<head>
<title>视频播放器</title>
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://cdn.bootcss.com/video.js/7.6.5/video-js.min.css" rel="stylesheet">
<script src="./player/js/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/video.js/7.6.5/video.min.js"></script>
<script src="https://cdn.bootcss.com/video.js/7.6.5/lang/zh-CN.js"></script>
<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
</head>
<body>
<div class="header">
<div class="header-wrapper">
<div class="header-lookup">
<p class="title">视频播放器</p>
</div>
<nav class="header-nav">
<ul class="header-nav-list">
<li class="header-nav-list-option">
<a class="header-nav-link" href="#">使用教程</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="container">
<div class="player" id="player">
<video id="video" class="video" controls></video>
</div>
<table class="form-table" align="center">
<tr>
<td>
<input class="input" type="text" placeholder="视频的URL地址">
</td>
<td>
<button class="button"><i class="fa fa-play-circle-o"></i> 播放</button>
</td>
</table>
</div>
</body>
</html>
显示:
我该怎么做?