blob: 8c0b1011797bace37b411aa220e2a6b7acc239d3 (
plain)
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
|
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<link href="public/vendor/video-js/video-js.css" rel="stylesheet" type="text/css">
<link href="public/style/custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="public/vendor/jquery/jquery.min.js"></script>
<script src="public/vendor/video-js/video.dev.js"></script>
<script>
vjs.options.flash.swf = "public/vendor/video-js/video-js.swf";
</script>
<!--<script type="text/javascript">
$(function(){
var playButtonCheck = setInterval(function(){
$("div.vjs-big-play-button").each(function(){
clearInterval(playButtonCheck);
$("div.vjs-big-play-button").click(function(){
//$(this).html("sending request...");
console.log("I clicked it");
});
});
//something like this? yes, but im not sure about .load() what it do? i found this: Description: Load data from the server
//and place the returned HTML into the matched element...
//I guess it's only called when the element has fully loaded. there is also javascript's .onload event
// i think we can just use $().each(function()) to set events, if $() is empty no events will be set and interval will be active.
//ok works
//is there a way to make the pdf viewable online? haven't seen ok it's only 1.6 mb I think
}, 10);
});
</script>-->
</head>
<body>
<div class="video-wrapper">
<section class="container wrap">
<video id="div_video"
class="video-js vjs-default-skin"
controls=""
preload="none"
width="500" height="281"
poster="public/image/background.jpg"
>
</video> z
</section>
<div class="navigation">
<ul class="but-video">
<li class="prevTrack" ><div class="arrow-pause"></div><div class="arrow-prev"></div><div class="arrow-prev"></div></li>
<li class="reverseTime" ><div class="arrow-prev"></div><div class="arrow-prev"></div></li>
<li class="playToggle" id="play"><div class="arrow-play"></div></li>
<li class="forwardTime" ><div class="arrow-next"></div><div class="arrow-next"></div></li>
<li class="nextTrack" ><div class="arrow-next"></div><div class="arrow-next"></div><div class="arrow-pause"></div></li>
<li class="fullScreen" >FULL</li>
<li class="link" class="link">[link]</li>
<li class="scan" class="link">SCAN</li>
<li class="like" class="link">LIKE</li>
</ul>
</div>
</div>
<div>
YouTube link: <input type="text" id="videoLink" value="http://www.youtube.com/watch?v=p1WL9UjQ9nY" style="width: 400px;">
<button id="changeUrl">Send to Player</button>
</div>
<ul class="videoList">
<li class="videoItem" attr-link="http://www.youtube.com/watch?v=xbJqPlkVN-I" > <a href="http://www.youtube.com/watch?v=xbJqPlkVN-I"> video 1 </a> </li>
<li class="videoItem" attr-link="http://www.youtube.com/watch?v=-XW2Ur1KhYo" > <a href="http://www.youtube.com/watch?v=-XW2Ur1KhYo"> video 2 </a> </li>
<li class="videoItem" attr-link="http://www.youtube.com/watch?v=p1WL9UjQ9nY" > <a href="http://www.youtube.com/watch?v=p1WL9UjQ9nY"> video 3 </a> </li>
</ul>
<!--
-->
<script type="text/javascript" src="public/script/video_player.js"></script>
<script type="text/javascript" src="public/script/app.js"></script>
</body>
</html>
|
