Remplacer l'accès à des vidéos Yoube par celles sur notre serveur

**Obturatix** · 06/09/2024, 22h13

Bonjour à la communauté ,
et je salue particulièrement NoSmoking qui m'a particulièrement bien aidé pour mettre en place un code php, il y a quelques années...
https://www.anfmc-lorient.org/deadinaction.html qui tourne toujours sur le site dont je suis le webmaster.

Mon besoin d'aide :
J'ai un plugin qui me permet d'afficher de videos de Youtube et Vimeo Video et Daily motion Video :
https://www.anfmc-lorient.org/liensyoutube.html

Je l'utilise et il est ok :
Pour mettre de" la même manière des videos disons confidentielles , de nos anciens racontant leur parcours militaire, disons "le temps que le temps fasse son temps"....
qui seraient non pas hébergées chez Youtube mais sur notre serveur.
N'ayant pas les capacités de codeur j'en appelle encore une fois à votre aide

je voudrais remplacer la partie code lignes 34 à 50 et supprimer les lignes 52 à 93 pour pouvoir lire les videos qui sont chez mon hébergeur dans un répertoire vidéo au lieu de celles qui sont sur Youtube

Si quelqu'un peut m'aider , merci d'avance

je peux fournir l'ensemble des codes du plugin.
CSS etc etc
Cordialement
Obturatix/Ly

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
/*!
 
 * Inspiré par H Chun
 
 */
 
$(document).ready(function() {
	var $svThumb = $('.svThumb');
 
    $('#svList').wrapAll('<div id="svBox"></div>');
	$('#svBox').prepend('<div class="svPlayer">\
	<div class="infoBox">\
<div class="nowPlaying"><h3 class="svTitle svTitleFix">Cliquez une vidéo.</h3></div>\
	</div>\
	</div>');
	// $('.svPlayer').append('<div class="infoBox"></div>');
	//$('.infoBox').prepend('<div class="nowPlaying"><h3 class="svTitle svTitleFix">Choisissez une vidéo.</h3></div>');
	$svThumb.wrapInner('<div class="sv-text"></div>');
	$svThumb.prepend('<span class="sv-overlay"></span>');
 
	$(".sv-text").each(function () {
		var $numWords = $(this).text().length;
 
		if (($numWords >= 35) && ($numWords < 45)) {
			$(this).css("font-size", "15px");
		}
		else if ($numWords >= 46) {
			$(this).css("font-size", "14px");
		}
	});
 
});
 
$(document).ready(function() {
// Youtube Video
    $('.ytVideo').each(function() {
        var $videoID = $(this).attr('data-videoID'),
        $txt = $(this).text(),
        $ytVideo = $('<div class="meuVideo"> <iframe width="560" height="315" src="https://www.youtube.com/embed/' + $videoID + '?rel=0&showinfo=1&autoplay=1" frameborder="0" allowfullscreen></iframe> </div>'),
        $ytThumb = $('<img src="https://img.youtube.com/vi/' + $videoID + '/mqdefault.jpg" data-anchor="svBox"/>');
 
		$(this).prepend($ytThumb);
        $(this).click(function() {
            $('.meuVideo, .nowPlaying').remove();
            $('.svPlayer').prepend($ytVideo).hide().slideDown("fast");
			$('.infoBox').prepend('<div class="nowPlaying"><h3 class="svTitle">'+ $txt +'</h3></div>');
			return false;
        });
    });
    $(document).ready(function() {
 
// Vimeo Video
    $('.vimeoVideo').each(function() {
        var $videoID = $(this).attr('data-videoID'),
        $txt = $(this).text(),
        $vimeoVideo = $('<div class="meuVideo"> <iframe src="https://player.vimeo.com/video/' + $videoID + '?title=1&byline=1&portrait=1&badge=1&autoplay=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div>'),
        $thisElHack = this;
 
        $.getJSON('https://vimeo.com/api/v2/video/' + $videoID + '.json?callback=?', {
            format: "json"
        }, function(data) {
            var $vimeoThumb = data[0].thumbnail_large;
            $($thisElHack).prepend('<img src="' + $vimeoThumb + '" width="268" data-anchor="svBox"/>');
        });
 
        $(this).click(function() {
            $('.meuVideo, .nowPlaying').remove();
            $('.svPlayer').prepend($vimeoVideo).hide().slideDown("fast");
			$('.infoBox').prepend('<div class="nowPlaying"><h3 class="svTitle">'+ $txt +'</h3></div>');
			return false;
        });
    });
 
// DailyMotion Video
    $('.dailyMVideo').each(function() {
        var $videoID = $(this).attr('data-videoID'),
        $txt = $(this).text(),
        $dailyMVideo = $('<div class="meuVideo"> <iframe frameborder="0" width="640" height="360" src="//www.dailymotion.com/embed/video/' + $videoID + '?autoplay=1" allowfullscreen></iframe> </div>'),
        $thisElHack = this;
 
        $.getJSON('https://api.dailymotion.com/video/' + $videoID + '?fields=id,thumbnail_url', function(data) {
            var $dailyMThumb = data.thumbnail_url;
            $($thisElHack).prepend('<img src="' + $dailyMThumb + '" width="268" data-anchor="svBox"/>');
        });
 
        $(this).click(function() {
            $('.meuVideo, .nowPlaying').remove();
            $('.svPlayer').prepend($dailyMVideo).hide().slideDown("fast");
			$('.infoBox').prepend('<div class="nowPlaying"><h3 class="svTitle">'+ $txt +'</h3></div>');
			return false;
        });
    });
});
 
// Scroll to Top on image click
$(document).ready(function(){
    $('.svThumb').click(function() {
 
		var $thumbPath2 = $('.svThumb img').attr("data-anchor"),
		$thumbAnchor2 = $("#" + $thumbPath2),
		$leftAbsolute2 = $(".html,body");
		// fixed bug by swapping .position to .offset
		// added + (-40) pixels from top
		$thumbPosition2 = $thumbAnchor2.offset().top + (-40)
		console.log($thumbPosition2);
		$leftAbsolute2.animate({scrollTop: $thumbPosition2});
 
		$('.closeUiBtn').remove();
		$('#svBox').prepend('<div class="closeUiBtn">&times;</div>');
        return false;
    });
	// Fechar Videos
	$( document ).on( 'click', '.closeUiBtn', function() {
		$('.meuVideo, .nowPlaying, .closeUiBtn').remove();
		return false;
	});
});
 
$(document).ready(function(){
	function checkWidth() {
 
		var $svBoxParent = $("#svBox").parent().width(),
		$svBox = $("#svBox");
 
		if ($svBoxParent >= 900) {
			$svBox.removeClass();
			$svBox.addClass('mQuery900');
			console.log("900mQuery");
		} else if ($svBoxParent >= 700) {
			$svBox.removeClass();
			$svBox.addClass('mQuery700');
			console.log("700mQuery");
		}  else if ($svBoxParent <= 550) {
			$svBox.removeClass();
			$svBox.addClass('mQuery550');
			console.log("550mQuery");
		}
	}
	// Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
	//Remove before shipping
 
});

Voici le code Html qui permet de sélectionner les vidéos

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<link rel="stylesheet" type="text/css" href="{{WA_FILE svvg-styles.css}}"><link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="jquery-script-clear"></div>
</div>
</div>
<h1 style="margin:10px auto 20px auto; text-align:center;"></h1>
<ul id="svList">
		 <li class="svThumb ytVideo" data-videoID="vLNZ0G1LxZ8">L'innovation dan sles Cdos Marine</li>
		<li class="svThumb ytVideo" data-videoID="jq7d8FquHpQ">Entrainement corde lisse</li>
		<li class="svThumb ytVideo" data-videoID="dZUsXkN2hWA">Pilote d'embarcations rapides</li>
		<li class="svThumb ytVideo"data-videoID   ="7RUAPjwTTkY">Forces spéciales d'élite en Bretagne</li>
		<li class="svThumb ytVideo" data-videoID="3vKJw-IIOPA">Aux côtés des NC du Cdo Hubert</li>
		<li class="svThumb ytVideo" data-videoID ="ScwBjNzgSOo">Ce que l'on ne vous a jamais montré sur les commandos</li>
		<li class="svThumb ytVideo" data-videoID="0ASOnw4Rtdo">Remise de bérets verts - Ouistréham 2017</li>
		<li class="svThumb ytVideo" data-videoID="TP9kiJXSOqc">Hommes d'honneur : hommes des profondeurs</li>
		<li class="svThumb ytVideo" data-videoID="aqej3ekZNKY">Au coeur de notre métier : Medhi Fusilier-marin</li>
		<li class="svThumb ytVideo" data-videoID="OXmp46qXmxs">Rencontre avec les marins de l'Ecole des Fusilers marins</li>
		<li class="svThumb ytVideo" data-videoID="7CW0F-YnMd0">Plongeurs des armées : une passion, des métiers</li>
 
</ul>
<script src="{{WA_FILE speedvault.js}}"></script>

**mathieu** · 07/09/2024, 07h32

le code html général pour afficher une vidéo est de ce genre :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<video controls="">
    <source type="video/mp4" src="video.mp4"/>
    <source type="video/webm" src="video.webm"/>
    <source type="video/ogg" src="video.ogv"/>
</video>

ce code utilise 3 fichiers différents ce qui permet au navigateur de choisir le format qu'il gère le mieux.

mais dans votre cas, s'il s'agit d'un espace privé, vous n'aurez peut-être pas besoin de plusieurs formats. avez-vous déjà une vidéo stockée sur votre site pour faire un test ? et éventuellement s'il s'agit d'une vidéo confidentielle, vous aurez aussi besoin d'un testeur qui vérifie qu'il peut bien voir la vidéo dans son navigateur.

**Obturatix** · 07/09/2024, 09h34

Bonjour et merci Mathieu,
Les vidéos sont au format MP4.
Les vidéos ne sont pas en elles mêmes confidentielles, mais on veut limiter le visionnage aux membres par un accès restreint aux pages dédiées ( ce qui est déjà en place.
J'en ai une et je vais tester ce week-end.
merci et bonweek-end
Cordialement
Obturatix/Ly

**Obturatix** · 07/09/2024, 20h42

Bonsoir à la communauté,
Pas évident, j'ai essayé de modifier une partie du code mais cela ne fonctionne pas.
ligne 34 à 50 mais plus du tout de vidéo.
@Mathieu : non c'est pas bon non plus.

merci encore
Cordialement
Obtratix/Ly

**mathieu** · 10/09/2024, 15h07

Envoyé par Obturatix

@Mathieu : non c'est pas bon non plus.

je n'ai pas compris de quoi vous parlez.

**Obturatix** · 12/09/2024, 08h29

Bonjour @mathieu
le code que vous fournissez :

Le code html général pour afficher une vidéo est de ce genre :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<video controls="">
    <source type="video/mp4" src="video.mp4"/>
    <source type="video/webm" src="video.webm"/>
    <source type="video/ogg" src="video.ogv"/>
</video>

ce code utilise 3 fichiers différents ce qui permet au navigateur de choisir le format qu'il gère le mieux.