video-player.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <style>
  2. #videoelem { width: 100%; height: 100%; position: absolute; }
  3. #videocontainer { position: relative; width: 400px; height:230px;-webkit-user-select:none; -webkit-transition-duration:0.2s}
  4. .videobutton {
  5. line-height: 40pt;
  6. border: 3px solid white;
  7. -webkit-border-radius: 20px;
  8. opacity: 0.5;
  9. position: absolute;
  10. font-size: 40pt;
  11. color: white;
  12. background-color: gray;
  13. cursor: pointer;
  14. text-align: center;
  15. z-index: 1;
  16. }
  17. .videozoombutton { bottom:10px;right:10px;width:1.1em;height:1.1em;font-size:15pt; line-height: 15pt; border:2px solid white; -webkit-border-radius: 8px;}
  18. .videoloading { top: 0; bottom: 0; margin:auto; left:0; right:0; width: 7em; height: 1.2em; cursor:default;}
  19. .videofadeout { -webkit-transition: 1.5s; opacity:0; }
  20. #videocontainer:hover .videofadeout { opacity: 0.5; }
  21. .videoplay { top: 0; bottom: 0; margin:auto; left:0; right:0; width: 1.2em; height: 1.2em;}
  22. </style>
  23. <script>
  24. var videoElem;
  25. var playButton;
  26. var showProgress = true;
  27. var videoLargeSize = false;
  28. function startedPlaying() {
  29. showProgress = false;
  30. playButton.innerHTML = "||"
  31. playButton.className = "videobutton videoplay videofadeout";
  32. }
  33. function stoppedPlaying() {
  34. playButton.innerHTML = ">"
  35. playButton.className = "videobutton videoplay";
  36. }
  37. function updateProgress(ev) {
  38. if (!showProgress)
  39. return;
  40. playButton.innerHTML = "Loading...";
  41. playButton.className = "videobutton videoloading";
  42. }
  43. function initVideo() {
  44. videoElem = document.getElementById("videoelem");
  45. playButton = document.getElementById("videoplaybutton");
  46. videoZoomButton = document.getElementById("videozoombutton");
  47. if (!videoElem.play) {
  48. playButton.style.display = "none";
  49. videoZoomButton.style.display = "none";
  50. return;
  51. }
  52. videoElem.addEventListener("play", startedPlaying);
  53. videoElem.addEventListener("pause", stoppedPlaying);
  54. videoElem.addEventListener("ended", function () {
  55. if (!videoElem.paused)
  56. videoElem.pause();
  57. stoppedPlaying();
  58. });
  59. videoElem.addEventListener("progress", updateProgress);
  60. videoElem.addEventListener("begin", updateProgress);
  61. videoElem.addEventListener("canplaythrough", function () {
  62. videoElem.play();
  63. });
  64. videoElem.addEventListener("error", function() {
  65. playButton.innerHTML = "Load failed";
  66. });
  67. videoElem.addEventListener("dataunavailable", function () {
  68. if (!showProgress) {
  69. showProgress = true;
  70. playButton.innerHTML = "Loading...";
  71. playButton.className = "videobutton videoloading";
  72. }
  73. });
  74. videoZoomButton.addEventListener("click", function () {
  75. var container = document.getElementById("videocontainer");
  76. videoLargeSize = !videoLargeSize;
  77. if (videoLargeSize) {
  78. container.style.width = "640px";
  79. container.style.height = "360px";
  80. videoZoomButton.innerHTML = "-";
  81. } else {
  82. container.style.width = "400px";
  83. container.style.height = "225px";
  84. videoZoomButton.innerHTML = "+";
  85. }
  86. });
  87. playButton.addEventListener("click", function () {
  88. if (videoElem.paused) {
  89. if (!videoElem.src)
  90. videoElem.src = "http://movies.apple.com/movies/us/apple/ipoditunes/2007/touch/ads/apple_ipodtouch_touch_r640-9cie.mov";
  91. videoElem.play();
  92. } else
  93. videoElem.pause();
  94. } );
  95. }
  96. </script>
  97. <div id=videocontainer>
  98. <video id=videoelem poster="resources/touch-poster.png">
  99. <b style="font-size:15pt">This is fallback content. If you had video support you would see some here!</b></video>
  100. <div class="videobutton videoplay" id=videoplaybutton>&gt;</div>
  101. <div id=videozoombutton class="videobutton videozoombutton videofadeout">+</div>
  102. </div>
  103. <script>initVideo();</script>