Tijden veranderen
Youtube filmpjes online playlist maken
Kan er werkelijk niks op vinden.
Ik wil dat op mijn site 15 video's staan die ik zelf instel. En dat mensen daar bijvoorbeeld 10 filmpjes of 6 of 8 dus een willekeurig aantal kunnen slepen en in de juiste volgorde zetten.
Daarna kunnen ze op play drukken en moeten die youtube filmpjes in die volgorde afspeeld worden.
Een goed voorbeeld is Songa.nl of http://youtubelister.com/
Het enige verschil is dat ik zelf 15 filmpjes instel waaruit men kan kiezen en dat er niet gezocht word oid.
Weet iemand in godsnaam waar je dit kan vinden? Is het ready-to-use ergens?
Alvast zeeeeer veel dank.
Mikey jansen op 21/08/2013 11:40:56:
... dat mensen daar bijvoorbeeld 10 filmpjes of 6 of 8 dus een willekeurig aantal kunnen slepen en in de juiste volgorde zetten...
Laat me hier al mee beginnen.
Dit is op zich al iets waar wat werk aan is.
Jij kunt die items vullen met thumbnails van de video's.
iets als <div data-index="0"><img src="..."></div>
Maak je trouwens die thumbnais zelf aan?
Voorbeeld:
Code (php)
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
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
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#source div').draggable({
});
$( "#target" ).sortable({
update: function() {
// voorlopig doen we hier niets
}
});
$( "#target" ).droppable({
drop: function( event, ui ) {
// notice: $(this) is the drop area
// $(ui.draggable) is the dropped object
// check if the dropped item is a newly dropped item or an item being sorted.
if ($(ui.draggable).parent()[0] === $(this)[0]) {
// the item is already inside the drop area
}
else {
// the item is droppen inside the drop area
// we will copy/clone the object and put the clone in the target.
var clone = $(ui.draggable).clone();
$(ui.draggable).remove();
clone.appendTo(this).removeAttr('style').removeAttr('class');
$( "#target" ).sortable('refresh').disableSelection();
}
}
});
});
</script>
<style>
#source div, #target div {
border: 1px solid #999999;
margin: 10px;
width: 80px;
cursor: pointer;
}
#target {
width: 400px;
height: 400px;
border: 1px solid #999999;
position: relative;
}
#source {
width: 400px;
height: 400px;
border: 1px solid #999999;
position: relative;
}
</style>
</head>
<body>
<div id="source">
<div data-index="0">item 0</div>
<div data-index="1">item 1</div>
<div data-index="2">item 2</div>
<div data-index="3">item 3</div>
<div data-index="4">item 4</div>
<div data-index="5">item 5</div>
<div data-index="6">item 6</div>
</div>
<div id="target">
</div>
</body>
</html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$('#source div').draggable({
});
$( "#target" ).sortable({
update: function() {
// voorlopig doen we hier niets
}
});
$( "#target" ).droppable({
drop: function( event, ui ) {
// notice: $(this) is the drop area
// $(ui.draggable) is the dropped object
// check if the dropped item is a newly dropped item or an item being sorted.
if ($(ui.draggable).parent()[0] === $(this)[0]) {
// the item is already inside the drop area
}
else {
// the item is droppen inside the drop area
// we will copy/clone the object and put the clone in the target.
var clone = $(ui.draggable).clone();
$(ui.draggable).remove();
clone.appendTo(this).removeAttr('style').removeAttr('class');
$( "#target" ).sortable('refresh').disableSelection();
}
}
});
});
</script>
<style>
#source div, #target div {
border: 1px solid #999999;
margin: 10px;
width: 80px;
cursor: pointer;
}
#target {
width: 400px;
height: 400px;
border: 1px solid #999999;
position: relative;
}
#source {
width: 400px;
height: 400px;
border: 1px solid #999999;
position: relative;
}
</style>
</head>
<body>
<div id="source">
<div data-index="0">item 0</div>
<div data-index="1">item 1</div>
<div data-index="2">item 2</div>
<div data-index="3">item 3</div>
<div data-index="4">item 4</div>
<div data-index="5">item 5</div>
<div data-index="6">item 6</div>
</div>
<div id="target">
</div>
</body>
</html>
Gewijzigd op 21/08/2013 16:13:57 door Kris Peeters