diff options
Diffstat (limited to 'index.html')
| -rwxr-xr-x | index.html | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100755 index 0000000..8c0b101 --- /dev/null +++ b/index.html @@ -0,0 +1,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> + |