Comment récupérer un tableau js en php sans planter ma fonction
Bonjour,
Débutant et autodidacte en php et javascript, j'essaie, dans le cadre d'un site web dont je m'occupe, de mettre en place quelques script pour me simplifier la vie.
Ainsi, j'ai mis en place, à l'aide de "google my friend" et de codes trouvés ça et là, adaptés à mes besoins, un player mp4 dans une page php qui liste automatiquement tous les mp4 présents dans le répertoire où se trouve la page php.
Ca fonctionne sans souci.
J'aimerais maintenant récupérer la liste des fichiers qui ont été visionnés à des fins de statistiques.
Dans la fonction handler, le player, j'ai créé un tableau filenamesarray qui reprend tous les fichiers lus. Lorsque je fais un alert(filenamesarray),
cela fonctionne parfaitement.
Cependant, dès que j'essaie de récupérer la valeur du tableau en php (dans url, avec ajax, via un cookie, etc...) bref dès que j'insère une autre commade que alert,
le player perd son style et repasse en lecteur défaut mp4 noir et sort donc, apparement de la fonction.
Quelqu'un aurait-il une idée qui me permettrait de "jounaliser" les fichiers en récupérant mon tableau js en php sans quitter la fonction ?
Pour les tests, j'ai inclus le css et les js dans le fichier php unique dont voici le code.
Merci d'avance à ceux qui voudront bien me consacrer un peu de temps !
Bruquer.
Code:
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> |
