1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
|
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>titre</title>
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif;background:#fbff84}
.center {text-align:center;width:700px;margin:0 auto;}
#player {
background:#9DD57E;
padding:10px;
width:640px; /*this should equal the width of the video you're using*/
margin:0 auto;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
span#logo, img#logo {
border:0 none;
height:50px;
position:absolute;
left :50%;
top:0px;
}
#player video {
width:640px; /*this will change the width of the video*/
}
/*below is the styling for the playlist*/
#playlist {
background:#9DD57E;
list-style:none;
padding:0;
margin:0;
width:640px;
}
#playlist h1 {
font: 20px Georgia, Helvetica, sans-serif;
color:#000000;
font-weight:bold;
font-style: italic;
padding:5px 2px;
margin:0;
}
#playlist a {
color:#000000;
font-style: italic;
background:#FBFF84;
padding:1px 10px;
display:block;
text-decoration:none;
border-bottom:1px solid #9DD57E;
}
#playlist a:hover {
text-decoration:none;
background:#9DD57E;
color:#000;
}
</style>
</head>
<?php
$current_php_filename = basename($_SERVER["PHP_SELF"]);
$current_php_filename_len = strlen($current_php_filename);
$current_dir_path = substr($_SERVER["PHP_SELF"],0,-$current_php_filename_len) ; // - php this filename len
$current_dir_open = opendir('.');
while( ($filename = readdir($current_dir_open)) !== false)
{
if($filename != "." && $filename != ".." && strtolower(substr($filename,-4))==".mp4")
$files_list_arr[] = utf8_encode($filename);
}
sort($files_list_arr);
?>
<body><br>
<div id="player">
<video controls="controls" width="640" height="480" preload="auto" >
<?php
foreach ($files_list_arr as $filename_to_list)
{
$link = '<source src="'.$current_dir_path.$filename_to_list.'" type="video/mp4" />' ;
echo $link;
}
?>
<?php closedir($current_dir_open); // closing open dir ?>
</video>
<div id="playlist">
<h1><center>Vidéos disponibles sur cette page</center></h1>
<?php
$current_dir_open = opendir('.');
foreach ($files_list_arr as $filename_to_list)
{
$filename_to_list_without_ext = substr($filename_to_list,0,-4);
$vidtitle = utf8_decode(str_replace("_", " ", $filename_to_list_without_ext));
// link generation
$link2 = '<a href="'.$current_dir_path.utf8_decode($filename_to_list).'">'.$vidtitle.'</a>' ;
// writing link2 to webpage
echo $link2 ;
}
?>
</div>
</div>
<script>
function handler(e)
{
e.preventDefault(); //Prevents default action of links going directly to the source file
videotarget = this.getAttribute("href"); //looks at the filename in the link's href attribute
filename = videotarget.substr(0, videotarget.lastIndexOf('.')) || videotarget; //Splits the filename and takes everything before the ".", giving us just name without the extension
filenamesarray.push(filename); //ok
alert(filenamesarray); //ok
video = document.querySelector("#player video"); //Finds div #player and video
video.removeAttribute("poster"); //Removes the poster attribute in the video tag
source = document.querySelectorAll("#player video source"); //Finds source elements inside the video tag
source[0].src = filename + ".mp4"; //defines the MP4 source
video.load(); //Loads video when video is selected
video.play(); //Plays video automatically
};
//Ensure all links in the div "#player" act in the same way:
var filenamesarray = new Array();
var video_playlist = document.getElementById("player"); //Element ID should be the same as the ID used in the container div in the HTML.
var links = video_playlist.getElementsByTagName('a');
for (var i=0; i<links.length; i++)
{
links[i].onclick = handler;
};
</script>
</body> |
Partager