gpt4 book ai didi

jquery - SublimeVideo YouTube和播放列表

转载 作者:行者123 更新时间:2023-12-03 06:25:20 26 4
gpt4 key购买 nike

我使用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-uiddata-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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com