我读了你的问题,我认为你想用你的所有视频制作一个单独的观看页面。如果独立播放器有一个播放列表,它可能没问题。我建议你可以使用一些你不需要学习 PHP 和 MYSQL 的 js 库。我找到了这个图书馆
http://mediafront.org/osmplayer/#.Uf_wrzmy_Dc
我认为它非常易于使用。您可以下载它,然后您可以在您的 html 页面中像这样修改您的代码。
<!DOCTYPE html>
<html>
<head>
<title>Video Title - FTVO</title>
<meta charset="UTF-8">
<!-- Include the core jQuery and jQuery UI -->
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<!-- Include the core media player JavaScript. -->
<script type="text/javascript" src="osmplayer/bin/osmplayer.compressed.js"></script>
<!-- Include the DarkHive ThemeRoller jQuery UI theme. -->
<link rel="stylesheet" href="osmplayer/jquery-ui/dark-hive/jquery-ui.css">
<!-- Include the Default template CSS and JavaScript. -->
<link rel="stylesheet" href="osmplayer/templates/default/css/osmplayer_default.css">
<link rel="stylesheet" href="osmplayer/templates/default/osmplayer.default.js">
<script type="text/javascript">
$(function() {
$("#osmplayer").osmplayer({
playlist: 'playlist.xml',
width: '480px',
height: '640px'
});
});
</script>
</head>
<body>
<h2>Video Title</h2>
<p>Watch this episode using the player below</p>
<div id="osmplayer"></div>
<hr>
<p>This site is property of <b>TechXtra Web Services</b></p>
</body>
</html>
对于您创建 XML 的播放列表,只需更改视频和图像的位置路径。
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<title>HTML5: Matagascar III</title>
<location>http://progressive.totaleclips.com.edgesuite.net/105/e105598_257.mp4</location>
<image>http://www.movieposter.com/posters/archive/main/143/MPW-71686</image>
</track>
<track>
<title>HTML5: Snow White and the Huntsman</title>
<location>http://progressive.totaleclips.com.edgesuite.net/103/e103981_257.mp4</location>
<image>http://www.movieposter.com/posters/archive/main/142/MPW-71148</image>
</track>
<track>
<title>HTML5: Men in Black III</title>
<location>http://progressive.totaleclips.com.edgesuite.net/105/e105857_257.mp4</location>
<image>http://www.movieposter.com/posters/archive/main/146/MPW-73434</image>
</track>
</trackList>
</playlist>