-
Notifications
You must be signed in to change notification settings - Fork 0
/
aide.html
159 lines (152 loc) · 7.65 KB
/
aide.html
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<div class="modal fade" id="aide" tabindex="-1" aria-labelledby="aideLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-xl">
<div class="modal-content bg-dark">
<div class="modal-header">
<h5 class="modal-title" id="aidelLabel" style="color: white;">Aide</h5>
</div>
<div class="modal-body">
<h5 style="color: white;">I - INTRODUCTION</h5>
<p style="color: white;">
Cet utilitaire permet de contrôler les flux vidéo provenant du/des providers lors d'une production.
<br>
Il affiche jusqu'à 4 flux vidéo qu'il suffit de renseigner via le menu Edition.
<br>
Le lecteur vidéo utilisé est celui fourni par le fournisseur de flux quand celui-ci le propose.
</p>
<h5 style="color: white;">II - EDITION</h5>
<p style="color: white;">
La page est découpée en 4 zones identiques, servant à renseigner les 4 flux.
<br>
Dans la zone noire, est indiqué le lien actuellement lu par le lecteur vidéo.
<br>
Le champs "Service" est optionnel. Il permet de choisir un fournisseur de flux.
<br>
Le champs "URL de la vidéo" doit être renseigné avec le lien contenu dans la constante SRC de la balise iframe fournie par le fournisseur de flux.
<br>
<b>Exemple sur un lien d'intégration "Youtube"</b> :
<br>
<textarea class="form-control" rows="2"><iframe width="560" height="315" src="https://www.youtube.com/embed/MsN0_WNXvh8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></textarea>
La partie à copier/coller est :
<textarea class="form-control" rows="1">https://www.youtube.com/embed/MsN0_WNXvh8</textarea>
</p>
<h5 style="color: white;">III - RECUPERATION DES LIENS</h5>
<p style="color: white;">
Ci-dessous, quelques exemples pour récupérer le lien chez certain fournisseurs.
</p>
<p>
<span class="badge bg-danger">YOUTUBE</span>
<br>
<span style="color: grey;">[iframe width="560" height="315" src="</span><mark>https://www.youtube.com/embed/qLINONEDT6U</mark><span style="color: grey;">" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> [/iframe]</span>
</p>
<p>
<span class="badge bg-danger">FACEBOOK</span>
<br>
<span style="color: grey;">[iframe src="<mark>https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2FBENBOY26%2Fvideos%2F677457100062212%2F&show_text=false&width=560&t=0</mark>" width="560" height="314" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"> [/iframe]</span>
</p>
<p>
<span class="badge bg-danger">VIMEO</span>
<br>
<span style="color: grey;">[iframe src="<mark>https://player.vimeo.com/video/684542460?h=782c09adc7&title=0&byline=0&portrait=0</mark>" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen>[/iframe]</span>
</p>
<h5 style="color: white;">IV - INSTALLATION</h5>
<p style="color: white;">
Ce script est sous license libre.
<br>
Ce script doit être installé sur un serveur Internet utilisant les technologies
<a href="https://httpd.apache.org/" class="link-light" target="_new">APACHE</a>,
<a href="https://www.php.net/" class="link-light" target="_new">PHP</a>
<a href="https://www.mysql.com/" class="link-light" target="_new">MYSQL</a>
et
<a href="https://www.phpmyadmin.net/" class="link-light" target="_new">PHPMYADMIN</a>
pour administrer la base de données.
<br>
Les sources
<a href="https://getbootstrap.com/" class="link-light" target="_new">BOOTSTRAP</a>
sont fournies avec le script.
</p>
<h6 style="color: white;">ETAPE 1</h6>
<p style="color: white;">
Copier le contenu du dossier dans un répertoire accessible sur votre serveur web.
</p>
<h6 style="color: white;">ETAPE 2</h6>
<p style="color: white;">
Créer une base de données MYSQL ou utiliser une déjà existante et rajouter deux tables : services et stream :
<br>
<textarea class="form-control" rows="20">CREATE TABLE services (
id int(11) NOT NULL,
providers text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
INSERT INTO services (id, providers) VALUES
(1, 'Youtube'),
(2, 'Daylimotion'),
(3, 'Vimeo'),
(4, 'Amazon'),
(5, 'Twitch'),
(6, 'Facebook'),
(7, 'Infomaniak'),
(8, 'Ustream'),
(9, 'Dacast'),
(10, 'Clevercast'),
(11, 'Boxcast'),
(12, 'ESPxMedia'),
(13, 'IBM Video Streaming'),
(14, 'Meridix'),
(15, 'Ministerio TV'),
(16, 'LinkedIn'),
(17, 'Restream'),
(18, 'Scale Engine'),
(19, 'Streaming Video Provider'),
(20, 'Wowza'),
(21, 'Stream Shark');
CREATE TABLE stream (
id int(11) NOT NULL,
url text NOT NULL,
service text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
INSERT INTO stream (id, url, service) VALUES
(1, 'https://www.youtube.com/embed/jVYG_eH5UMU', 'Youtube'),
(2, 'https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2FMonacoBasket%2Fvideos%2F1660405357652479%2F&show_text=false&width=476&t=0', 'Facebook'),
(3, 'https://www.dailymotion.com/embed/video/xgz4t1?autoplay=1', 'Daylimotion'),
(4, 'https://player.vimeo.com/video/683127004?h=9cd06d5487', 'Vimeo');
ALTER TABLE services
ADD PRIMARY KEY (id);
ALTER TABLE stream
ADD PRIMARY KEY (id);
ALTER TABLE services
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=22;
ALTER TABLE stream
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
COMMIT;</textarea>
<br>
La table "services" peut être modifiée en fonction de choix personnel.
<br>
La table "stream" contient déjà des liens d'exemples qui peuvent êtres obsolètes le jour de la mise en place du script sur un nouveau serveur.
</p>
<h6 style="color: white;">ETAPE 3</h6>
<p style="color: white;">
Modifier le fichier "connect.php" qui se trouve dans le répertoire du script.
<br>
Entrer les informations liées au serveur Internet utilisé :
<textarea class="form-control" rows="1">$bdd = new PDO('mysql:host=localhost;port=3306;dbname=nom_de_la_base_de_donnee;charset=utf8', 'login', 'motdepasse');</textarea>
<br>
<b>HOST</b> : doit comporter le host sur lequel est hébergé la base de donnée. Sur un serveur unique pour APACHE et MYSQL, le plus souvent on reste en localhost. Sinon il faut regarder la notice d'utilisation fournie par le fournisseur de service.
<br>
<b>PORT</b> : Le port par défaut est le 3306. Le modifier si les informations du serveur MYSQL sont différentes
<br>
<b>DBNAME</b> : doit comporter le nom de la base de données utilisée.
<br>
A la place de <b>LOGIN</b> et <b>MOTDEPASSE</b>, entrer les informations d'accès à la base de données fournies par le fournisseur de service.
</p>
<h6 style="color: white;">ETAPE 4</h6>
<p style="color: white;">
Dans un navigateur, écrire l'adresse correspondante à votre serveur et le dossier contenant le script. Par exemple, https://monsite.com/moniteur/".
</p>
<h5 style="color: white;">V - CONCLUSION</h5>
<p style="color: white;">
Ce script est fonctionnel avec les navigateur Google Chrome, Microsoft Edge, Firefox, Brave, Opera sur PC avec une résolution de 1920 x 1080 pixels.
<br>
Le script n'est pas compatible avec les mobiles et tablettes.
</div>
</div>
</div>
</div>