我使用SublimeVideo。我想使用播放列表(playlist)。此播放列表中的视频将来自Youtube(youtube)。
我将文档中的youtube代码和播放列表一起使用，如下所示:
<div id="playlist1" class="sv_playlist">
<div class="video_wrap">
<video id="video1" class="sublime" data-youtube-id="10uh__bY1GA" poster="posterframe1.jpg" width="640" height="360" preload="none" data-autoresize="fit">
</video>
</div>
<ul class="thumbs">
<li id="thumbnail_video1">
<a href="">
<img alt="Thumbnail 1" src="thumbnail1.jpg" />
<span class="play" />
</a>
</li>
</ul>
此代码未显示任何内容。没有视频播放器。 Videoplayer对于YouTube和播放列表而言可以完美地分开工作，但不能一起工作。
最佳答案
假设您已经为您的站点准备了自己的加载程序代码，并且确实在将要使用SublimeVideo播放器的站点页面中包含了此代码。强烈建议将该脚本插入<head>标记中，如下所示:
<head>
...
<script type="text/javascript" src="//cdn.sublimevideo.net/js/ipr592yl.js"></script>
...
</head>
ipr592yl是我的 token ，适用于本地开发(127.0.0.1)和我自己的部署站点。您应该拥有自己的软件，如果没有，请告诉我，我将指导您完成必要的步骤。要插入youtube视频，您所需要做的就是包括一个
<video>标签以及相应的data-uid和data-youtube-id。它们都代表YouTube video ID。<div class='video_wrap'>
<video id="video1" width="640" height="360"
data-uid="UNg9gQsck1c" data-youtube-id="UNg9gQsck1c" preload="none">
</video>
</div>
看看DEMO。这是代码:
HTML :
<!DOCTYPE html>
<html>
<head>
<title>SublimeVideo: Responsive Playlist</title>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type' />
<link rel="stylesheet" type="text/css" href="./css/playlist-autoresize.css" media="screen" />
<script type="text/javascript" src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
<script type="text/javascript" src="http://cdn.sublimevideo.net/js/ipr592yl.js"></script>
<script type="text/javascript" src="./js/playlist-autoresize.js"></script>
</head>
<body>
<div id="global" style="width:640px; margin:20px auto; padding:0 20px;">
<h1>SublimeVideo</h1>
<h3 id='feature-description'>Responsive Playlist with youtube videos</h3>
<div id="demo">
<div id="playlist1" class="sv_playlist">
<div class='video_wrap'>
<video id="video1" width="640" height="360" data-uid="UNg9gQsck1c" data-youtube-id="UNg9gQsck1c" preload="none">
</video>
</div>
<div class='video_wrap'>
<video id="video2" class="sublime" width="640" height="360" data-uid="CQeS9Q_oOnY" data-youtube-id="CQeS9Q_oOnY" preload="none">
</video>
</div>
<div class='video_wrap'>
<video id="video3" class="sublime" width="640" height="360" data-uid="DVwHCGAr_OE" data-youtube-id="DVwHCGAr_OE" preload="none">
</video>
</div>
<ul class='thumbs'>
<li id='thumbnail_video1'>
<a href=''>
<img alt='' src='./images/thumbnail1.png' />
<span class='play' />
</a>
</li>
<li id='thumbnail_video2'>
<a href=''>
<img alt='' src='./images/thumbnail2.png' />
<span class='play' />
</a>
</li>
<li id='thumbnail_video3'>
<a href=''>
<img alt='' src='./images/thumbnail3.png' />
<span class='play' />
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
jQuery(
playlist-autoresize.js)和css(playlist-autoresize.css)与playlist sample中使用的完全相同。希望它有用!
关于jquery - SublimeVideo YouTube和播放列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27647275/