1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8" /> 5<!-- Website Design By: www.happyworm.com --> 6<title>Demo : jPlayer as a video player</title> 7<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 8<link href="../../dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" /> 9<script type="text/javascript" src="../../lib/jquery.min.js"></script> 10<script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script> 11 12<!-- 13 Note that the insertion of jQuery and jPlayer above is optional. 14 The Popcorn jPlayer Player Plugin will load jQuery and jPlayer during instancing if not present in the page. 15 Having jQuery and jPlayer present in the page avoids asynchronous player instancing. 16--> 17 18<script type="text/javascript" src="../../lib/popcorn.ie8.js"></script> 19<script type="text/javascript" src="../../lib/popcorn.js"></script> 20<script type="text/javascript" src="../../lib/popcorn.player.js"></script> 21<script type="text/javascript" src="../../dist/popcorn/popcorn.jplayer.min.js"></script> 22<script type="text/javascript" src="../../lib/popcorn.subtitle.js"></script> 23<script type="text/javascript"> 24//<![CDATA[ 25 26$(document).ready(function(){ 27 28 var p = Popcorn.jplayer('#jquery_jplayer_1', { 29 media: { 30 title: "Big Buck Bunny Trailer", 31 m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v", 32 ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv", 33 webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm", 34 poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png" 35 }, 36 options: { 37 swfPath: "../../dist/jplayer", 38 supplied: "webmv, ogv, m4v", 39 size: { 40 width: "640px", 41 height: "360px", 42 cssClass: "jp-video-360p" 43 }, 44 useStateClassSkin: true, 45 autoBlur: false, 46 smoothPlayBar: true, 47 keyEnabled: true 48 } 49 }) 50 .subtitle({ 51 start: 2, 52 end: 6, 53 text: "This text is the Popcorn Subtitle Plugin" 54 }) 55 .subtitle({ 56 start: 6, 57 end: 10, 58 text: "Working with the Popcorn jPlayer Player Plugin" 59 }) 60 .subtitle({ 61 start: 10, 62 end: 15, 63 text: "Enabling jPlayer to function with the features of Popcorn" 64 }) 65 .subtitle({ 66 start: 16, 67 end: 32, 68 text: "Have fun playing with it!" 69 }); 70 71}); 72//]]> 73</script> 74</head> 75<body> 76<div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player"> 77 <div class="jp-type-single"> 78 <div id="jquery_jplayer_1" class="jp-jplayer"></div> 79 <div class="jp-gui"> 80 <div class="jp-video-play"> 81 <button class="jp-video-play-icon" role="button" tabindex="0">play</button> 82 </div> 83 <div class="jp-interface"> 84 <div class="jp-progress"> 85 <div class="jp-seek-bar"> 86 <div class="jp-play-bar"></div> 87 </div> 88 </div> 89 <div class="jp-current-time" role="timer" aria-label="time"> </div> 90 <div class="jp-duration" role="timer" aria-label="duration"> </div> 91 <div class="jp-controls-holder"> 92 <div class="jp-controls"> 93 <button class="jp-play" role="button" tabindex="0">play</button> 94 <button class="jp-stop" role="button" tabindex="0">stop</button> 95 </div> 96 <div class="jp-volume-controls"> 97 <button class="jp-mute" role="button" tabindex="0">mute</button> 98 <button class="jp-volume-max" role="button" tabindex="0">max volume</button> 99 <div class="jp-volume-bar"> 100 <div class="jp-volume-bar-value"></div> 101 </div> 102 </div> 103 <div class="jp-toggles"> 104 <button class="jp-repeat" role="button" tabindex="0">repeat</button> 105 <button class="jp-full-screen" role="button" tabindex="0">full screen</button> 106 </div> 107 </div> 108 <div class="jp-details"> 109 <div class="jp-title" aria-label="title"> </div> 110 </div> 111 </div> 112 </div> 113 <div class="jp-no-solution"> 114 <span>Update Required</span> 115 To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>. 116 </div> 117 </div> 118</div> 119</body> 120 121</html> 122
