目前，我想在项目中实现 video.js 库，并向该库添加 unplugin 以制作多个视频的复制品列表，但在实现所有内容时，它会标记我以下内容:
player.playlist is not a function
我的测试的完整代码:
HTML 代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-playLists/0.2.0/videojs-playlists.js"></script>
</head>
<body>
<video id="Reproductor" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg"
data-setup="{}">
<source src="TheLast.mp4" type='video/mp4'>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</body>
</html>
CSS 代码:
<style type="text/css">
.vjs-default-skin {
color: #000000;
}
.vjs-default-skin .vjs-play-progress,
.vjs-default-skin .vjs-volume-level {
background-color: red;
}
.vjs-default-skin .vjs-control-bar,
.vjs-default-skin .vjs-big-play-button {
background: red;
}
.vjs-default-skin .vjs-slider {
background: red;
}
.vjs-default-skin .vjs-control-bar {
font-size: 103%;
}
</style>
Javascript 代码:
<script>
$(document).ready(function() {
var player = videojs('Reproductor');
//The problem that the browser console indicates is in the line below
player.playlist([{
sources: [{
src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
type: 'video/mp4'
}],
poster: 'http://media.w3.org/2010/05/sintel/poster.png'
}, {
sources: [{
src: 'http://media.w3.org/2010/05/bunny/trailer.mp4',
type: 'video/mp4'
}],
poster: 'http://media.w3.org/2010/05/bunny/poster.png'
}, {
sources: [{
src: 'http://vjs.zencdn.net/v/oceans.mp4',
type: 'video/mp4'
}],
poster: 'http://www.videojs.com/img/poster.jpg'
}, {
sources: [{
src: 'http://media.w3.org/2010/05/bunny/movie.mp4',
type: 'video/mp4'
}],
poster: 'http://media.w3.org/2010/05/bunny/poster.png'
}, {
sources: [{
src: 'http://media.w3.org/2010/05/video/movie_300.mp4',
type: 'video/mp4'
}],
poster: 'http://media.w3.org/2010/05/video/poster.png'
}]);
// Play through the playlist automatically.
player.playlist.autoadvance(0);
});
</script>
所有组件都在各自的位置。
最佳答案
应该是带有大写 L 的 player.playList。
最重要的是，sources 应该是 src，一个 URL 数组
player.playList([{
src: ['http://media.w3.org/2010/05/sintel/trailer.mp4'],
poster: 'http://media.w3.org/2010/05/sintel/poster.png'
}, {
src: ['http://media.w3.org/2010/05/bunny/trailer.mp4'],
poster: 'http://media.w3.org/2010/05/bunny/poster.png'
}, {
src: ['http://vjs.zencdn.net/v/oceans.mp4'],
poster: 'http://www.videojs.com/img/poster.jpg'
}, {
src: ['http://media.w3.org/2010/05/bunny/movie.mp4'],
poster: 'http://media.w3.org/2010/05/bunny/poster.png'
}, {
src: ['http://media.w3.org/2010/05/video/movie_300.mp4'],
poster: 'http://media.w3.org/2010/05/video/poster.png'
}]);
关于javascript - 我的播放列表插件无法在 videojs 上运行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50544633/