html 5 player by fahad

2014-03-26 07:25:08 +00:00 · 2014-03-26 07:25:08 +00:00 · 3252b0ebb7
commit 3252b0ebb7
parent 363ddce8d6
16 changed files with 828 additions and 0 deletions
--- a/upload/player/html5_player/embed_player.php
+++ b/upload/player/html5_player/embed_player.php
--- a/upload/player/html5_player/fallback.swf
+++ b/upload/player/html5_player/fallback.swf
--- a/upload/player/html5_player/html5_player.html
+++ b/upload/player/html5_player/html5_player.html
@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+
+<link rel="stylesheet" href="{$html5_player_url}/style.css" />
+<script type="text/javascript" src="{$html5_player_url}/jquery.js"></script>
+<script type="text/javascript" src="{$html5_player_url}/html5_player.js"></script>
+
+</head>
+
+
+
+
+
+
+
+<body>
+
+
+
+<div class="videoContainer">
+  <div class="qualityopt">
+        <ul class="list">
+
+        <li class="list1"><a href="#">720</a></li>
+        <li class="list1"><a href="#">480</a></li>
+        <li class="list1"><a href="#">360</a></li>
+        <li class="list1"><a href="#">240</a></li>
+       </ul>
+    </div>
+  
+  <video id="myVideo"   preload="auto" width="700" height="370" >
+     <source src="{$vdata}" type="video/mp4">
+     <source src="{$vdata}" type="video/webm">
+     <source src="{$vdata}" type="video/ogg">
+   
+    
+     <p>Your browser does not support the video tag.</p>
+
+
+      <!-- Fallback to Flash. -->
+      <!-- Add 24px to the height for the video player -->
+
+     <object width="800" height="374" type="application/x-shockwave-flash" data="{$html5_player_url}/fallback.swf">
+
+  <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
+
+     <param name="movie" value="{$html5_player_url}/player.swf"/>
+     <param name="allowFullScreen" value="true"/>
+     <param name="flashvars" value="autostart=true&amp;file={$vdata}"/>
+
+     </object>
+
+
+   </video>
+
+
+  <div class="caption">video_name</br>Uploaded by {if $userquery->login_check('',true)} {$test1} {else} Anonymous User {/if}
+  </div>
+
+  
+  <div class="control">
+
+    <div class="topControl">
+      <div class="progress">
+        <span class="bufferBar"></span>
+        <span class="timeBar"></span>
+      </div>
+      
+    </div>
+    
+    <div class="btmControl">
+      <div class="btnPlay btn" title="Play/Pause video"></div>
+      <div class="sound sound2 btn" title="Mute/Unmute sound"></div>
+      <div class="volume" title="Set volume">
+        <span class="volumeBar"></span>
+      </div>
+      <div class="time">
+        <span class="current"></span> 
+        <span class="duration"></span> 
+      </div>
+      
+      <div class="btnFS btn" title="Switch to full screen"></div>
+
+      <div class="smallscr largescr btn" title="enlarge size"></div>
+       
+         <div class="quality btn" title="quality settings"></div>
+
+      <div class="logo btn" title="CB logo">
+      <a href="http://www.clipbucket.com/‎" ></a>
+      </div>
+      
+     
+    </div>
+    
+  </div>
+
+  <div class="loading"></div>
+</div>
+
+ 
+
+</body>
+</html>
--- a/upload/player/html5_player/html5_player.js
+++ b/upload/player/html5_player/html5_player.js
@ -0,0 +1,305 @@
+$(document).ready(function(){
+	//INITIALIZE
+	var video = $('#myVideo');
+	
+	//remove default control when JS loaded
+	video[0].removeAttribute("controls");
+	$('.control').show().css({'bottom':-60});
+	$('.loading').fadeIn(500);
+	$('.caption').fadeIn(500);
+ 
+	//before everything get started
+	video.on('loadedmetadata', function() {
+		$('.caption').animate({'top':-60},370);
+			
+		//set video properties
+		$('.current').text(timeFormat(0));
+		$('.duration').text(timeFormat(video[0].duration));
+		updateVolume(0, 0.7);
+			
+		//start to get video buffering data 
+		setTimeout(startBuffer, 150);
+			
+		//bind video events
+		$('.videoContainer')
+		.append('<div id="init"></div>')
+		.hover(function() {
+			$('.control').stop().animate({'bottom':0}, 100);
+			$('.caption').stop().animate({'top':-7}, 600);
+		}, function() {
+			if(!volumeDrag && !timeDrag){
+				$('.control').stop().animate({'bottom':-45}, 500);
+				$('.caption').stop().animate({'top':-60}, 500);
+			}
+		})
+		.on('click', function() {
+			$('#init').remove();
+			$('.btnPlay').addClass('paused');
+			$(this).unbind('click');
+			video[0].play();
+		});
+		$('#init').fadeIn(200);
+	});
+	
+	//display video buffering bar
+	var startBuffer = function() {
+		var currentBuffer = video[0].buffered.end(0);
+		var maxduration = video[0].duration;
+		var perc = 100 * currentBuffer / maxduration;
+		$('.bufferBar').css('width',perc+'%');
+			
+		if(currentBuffer < maxduration) {
+			setTimeout(startBuffer, 500);
+		}
+	};	
+	
+	//display current video play time
+	video.on('timeupdate', function() {
+		var currentPos = video[0].currentTime;
+		var maxduration = video[0].duration;
+		var perc = 100 * currentPos / maxduration;
+		$('.timeBar').css('width',perc+'%');	
+		$('.current').text(timeFormat(currentPos));	
+	});
+	
+	//CONTROLS EVENTS
+	//video screen and play button clicked
+	video.on('click', function() { playpause(); } );
+	$('.btnPlay').on('click', function() { playpause(); } );
+	var playpause = function() {
+		if(video[0].paused || video[0].ended) {
+			$('.btnPlay').addClass('paused');
+			video[0].play();
+		}
+		else {
+			$('.btnPlay').removeClass('paused');
+			video[0].pause();
+		}
+	};
+	
+	//speed text clicked
+	$('.btnx1').on('click', function() { fastfowrd(this, 1); });
+	$('.btnx3').on('click', function() { fastfowrd(this, 3); });
+	var fastfowrd = function(obj, spd) {
+		$('.text').removeClass('selected');
+		$(obj).addClass('selected');
+		video[0].playbackRate = spd;
+		video[0].play();
+	};
+	
+	//stop button clicked
+	$('.btnStop').on('click', function() {
+		$('.btnPlay').removeClass('paused');
+		updatebar($('.progress').offset().left);
+		video[0].pause();
+	});
+	
+	//fullscreen button clicked
+	$('.btnFS').on('click', function() {
+		if($.isFunction(video[0].webkitEnterFullscreen)) {
+			video[0].webkitEnterFullscreen();
+		}	
+		else if ($.isFunction(video[0].mozRequestFullScreen)) {
+			video[0].mozRequestFullScreen();
+		}
+		else {
+			alert('Your browsers doesn\'t support fullscreen');
+		}
+	});
+	
+	/*//light bulb button clicked
+	$('.btnLight').click(function() {
+		$(this).toggleClass('lighton');
+		
+		//if lightoff, create an overlay
+		if(!$(this).hasClass('lighton')) {
+			$('body').append('<div class="overlay"></div>');
+			$('.overlay').css({
+				'position':'absolute',
+				'width':100+'%',
+				'height':$(document).height(),
+				'background':'#000',
+				'opacity':0.9,
+				'top':0,
+				'left':0,
+				'z-index':999
+			});
+			$('.videoContainer').css({
+				'z-index':1000
+			});
+		}
+		//if lighton, remove overlay
+		else {
+			$('.overlay').remove();
+		}
+	});
+
+*/
+	
+	//sound button clicked
+	$('.sound').click(function() {
+		video[0].muted = !video[0].muted;
+		$(this).toggleClass('muted');
+		if(video[0].muted) {
+			$('.volumeBar').css('width',0);
+		}
+		else{
+			$('.volumeBar').css('width', video[0].volume*100+'%');
+		}
+	});
+	
+	//VIDEO EVENTS
+	//video canplay event
+	video.on('canplay', function() {
+		$('.loading').fadeOut(100);
+	});
+	
+	//video canplaythrough event
+	//solve Chrome cache issue
+	var completeloaded = false;
+	video.on('canplaythrough', function() {
+		completeloaded = true;
+	});
+	
+	//video ended event
+	video.on('ended', function() {
+		$('.btnPlay').removeClass('paused');
+		video[0].pause();
+	});
+
+	//video seeking event
+	video.on('seeking', function() {
+		//if video fully loaded, ignore loading screen
+		if(!completeloaded) { 
+			$('.loading').fadeIn(200);
+		}	
+	});
+	
+	//video seeked event
+	video.on('seeked', function() { });
+	
+	//video waiting for more data event
+	video.on('waiting', function() {
+		$('.loading').fadeIn(200);
+	});
+	
+	//VIDEO PROGRESS BAR
+	//when video timebar clicked
+	var timeDrag = false;	/* check for drag event */
+	$('.progress').on('mousedown', function(e) {
+		timeDrag = true;
+		updatebar(e.pageX);
+	});
+	$(document).on('mouseup', function(e) {
+		if(timeDrag) {
+			timeDrag = false;
+			updatebar(e.pageX);
+		}
+	});
+	$(document).on('mousemove', function(e) {
+		if(timeDrag) {
+			updatebar(e.pageX);
+		}
+	});
+	var updatebar = function(x) {
+		var progress = $('.progress');
+		
+		//calculate drag position
+		//and update video currenttime
+		//as well as progress bar
+		var maxduration = video[0].duration;
+		var position = x - progress.offset().left;
+		var percentage = 100 * position / progress.width();
+		if(percentage > 100) {
+			percentage = 100;
+		}
+		if(percentage < 0) {
+			percentage = 0;
+		}
+		$('.timeBar').css('width',percentage+'%');	
+		video[0].currentTime = maxduration * percentage / 100;
+	};
+
+	//VOLUME BAR
+	//volume bar event
+	var volumeDrag = false;
+	$('.volume').on('mousedown', function(e) {
+		volumeDrag = true;
+		video[0].muted = false;
+		$('.sound').removeClass('muted');
+		updateVolume(e.pageX);
+	});
+	$(document).on('mouseup', function(e) {
+		if(volumeDrag) {
+			volumeDrag = false;
+			updateVolume(e.pageX);
+		}
+	});
+	$(document).on('mousemove', function(e) {
+		if(volumeDrag) {
+			updateVolume(e.pageX);
+		}
+	});
+	var updateVolume = function(x, vol) {
+		var volume = $('.volume');
+		var percentage;
+		//if only volume have specificed
+		//then direct update volume
+		if(vol) {
+			percentage = vol * 100;
+		}
+		else {
+			var position = x - volume.offset().left;
+			percentage = 100 * position / volume.width();
+		}
+		
+		if(percentage > 100) {
+			percentage = 100;
+		}
+		if(percentage < 0) {
+			percentage = 0;
+		}
+		
+		//update volume bar and video volume
+		$('.volumeBar').css('width',percentage+'%');	
+		video[0].volume = percentage / 100;
+		
+		//change sound icon based on volume
+		if(video[0].volume == 0){
+			$('.sound').removeClass('sound2').addClass('muted');
+		}
+		else if(video[0].volume > 0.5){
+			$('.sound').removeClass('muted').addClass('sound2');
+		}
+		else{
+			$('.sound').removeClass('muted').removeClass('sound2');
+		}
+		
+	};
+
+
+
+
+
+$(".largescr").toggle(function(){
+$(".videoContainer,#myVideo").height($(".videoContainer,#myVideo").height()+150);
+},function(){
+$(".videoContainer,#myVideo").height($(".videoContainer,#myVideo").height()-150);
+
+});
+$(".largescr").toggle(function(){
+$(".videoContainer,#myVideo").width($(".videoContainer,#myVideo").width()+200);
+},function(){
+$(".videoContainer,#myVideo").width($(".videoContainer,#myVideo").width()-200);
+
+});
+
+
+
+	//Time format converter - 00:00
+	var timeFormat = function(seconds){
+		var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
+		var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));
+		return m+":"+s;
+	};
+});
--- a/upload/player/html5_player/html5_player.php
+++ b/upload/player/html5_player/html5_player.php
@ -0,0 +1,148 @@
+<?php
+/*
+	Player Name: Html5_videoplayer 1.0
+	Description: New html5 ClipBucket Player with all required features
+	Author: Arslan Hassan
+	ClipBucket Version: 2
+	Plugin Version: 1.0
+	
+ * This file is used to instruct ClipBucket
+ * for how to operate Flow player
+ * from docs.clip-bucket.com
+ *
+ * @Author : Arslan Hassan
+ * @Script : ClipBucket v2
+ * @License : Attribution Assurance License -- http://www.opensource.org/licenses/attribution.php
+ * @Since : September 15 2009
+ *
+ * Pakplayer is originated from Flowplayer so all things that works with flowplayer
+ * will ultimately work with Pakplayer
+ * Pakplayer license comes under AAL(OSI) please read our license agreement carefully
+ */
+
+$html5_player = false;
+
+if(!function_exists('html5_player'))
+{
+	define("HTML5_PLAYER",basename(dirname(__FILE__)));
+	define("HTML5_PLAYER_DIR",PLAYER_DIR."/".HTML5_PLAYER);
+	define("HTML5_PLAYER_URL",PLAYER_URL."/".HTML5_PLAYER);
+	assign('html5_player_dir',HTML5_PLAYER_DIR);
+	assign('html5_player_url',HTML5_PLAYER_URL);
+	
+	function html5_player($in)
+	{
+		global $html5_player;
+		$html5_player = true;
+		
+		$vdetails = $in['vdetails'];
+		$vid_file = get_video_file($vdetails,true,true);
+		//Checking for YT Referal
+
+		if(function_exists('get_refer_url_from_embed_code'))
+		{
+			$ref_details = get_refer_url_from_embed_code(unhtmlentities(stripslashes($vdetails['embed_code'])));
+			$ytcode = $ref_details['ytcode'];
+		}
+		
+		if($vid_file || $ytcode)
+		{
+			$hd = $data['hq'];
+			
+			if($hd=='yes') $file = get_hq_video_file($vdetails); else $file = get_video_file($vdetails,true,true);
+			$hd_file = get_hq_video_file($vdetails);
+			
+			
+			if($ytcode)
+			{
+				assign('youtube',true);
+				assign('ytcode',$ytcode);
+			}
+			
+			if(!strstr($in['width'],"%"))
+				$in['width'] = $in['width'].'px';
+			if(!strstr($in['height'],"%"))
+				$in['height'] = $in['height'].'px';
+		
+			if($in['autoplay'] =='yes' || $in['autoplay']===true || 
+			($_COOKIE['auto_play_playlist'] && ($_GET['play_list'] || $_GET['playlist'])))
+			{
+				$in['autoplay'] = true;
+			}else{
+				$in['autoplay'] = false;
+			}
+			
+			
+			//Logo Placement
+			//assign('logo_placement',cb_player_logo_position());
+			//assign('logo_margin',config('logo_padding'));
+			
+			//Setting Skin
+			//assign('cb_skin','glow/glow.xml');
+			
+			assign('player_data',$in);
+			assign('player_logo',website_logo());
+			assign('normal_vid_file',$vid_file);
+			assign('hq_vid_file',$hd_file);			
+			assign('vdata',$vdetails);
+			Template(HTML5_PLAYER_DIR.'/html5_player.html',false);
+			
+			return true;
+		}
+	}
+
+/*
+
+
+	function html5player_embed_src($vdetails)
+	{	
+		$config  = urlencode(BASEURL."/player/".HTML5_PLAYER."/embed_player.php?vid="
+		.$vdetails['videoid']."&autoplay=".config('autoplay_embed'));
+		
+		$embed_src = BASEURL.'/player/'.HTML5_PLAYER.'/player.swf?config='.$config;
+
+		
+		if(function_exists('get_refer_url_from_embed_code'))
+		{
+			$ref_details = get_refer_url_from_embed_code(unhtmlentities(stripslashes($vdetails['embed_code'])));
+			$ytcode = $ref_details['ytcode'];
+		}
+		
+		if(!$vdetails['embed_code']  || $vdetails['embed_code'] =='none'|| $ytcode)
+		{
+			$code = '<embed src="'.$embed_src.'" type="application/x-shockwave-flash"';
+			$code .= 'allowscriptaccess="always" allowfullscreen="true"  ';
+			$code .= 'width="'.config("embed_player_width").'" height="'.config("embed_player_height").'"></embed>';
+			return $code;
+		}else
+			return false;
+	}
+	
+   
+*/
+
+
+   
+	register_actions_play_video('html5_player');
+
+	$Cbucket->add_header(HTML5_PLAYER_DIR.'/html5_player.html');
+	$Cbucket->add_admin_header(HTML5_PLAYER_DIR.'/html5_player_header.html');
+
+}
+
+if($userquery->login_check('',true)){
+
+        global $db;
+	    $results = $db->select(tbl('users'),'*',"userid='".userid()."'");
+        foreach($results as $result){
+        $username =  $result['username'];
+        }
+
+
+ 
+        assign('test1',$username);
+
+}
+ 
+
+?>
--- a/upload/player/html5_player/html5_player_header.html
+++ b/upload/player/html5_player/html5_player_header.html
@ -0,0 +1 @@
+<script type="text/javascript" src="{$html5_player_url}/html5_player.js"></script>
--- a/upload/player/html5_player/jquery.js
+++ b/upload/player/html5_player/jquery.js
--- a/upload/player/html5_player/preview.png
+++ b/upload/player/html5_player/preview.png
--- a/upload/player/html5_player/skin/bigplay.png
+++ b/upload/player/html5_player/skin/bigplay.png
--- a/upload/player/html5_player/skin/caption.png
+++ b/upload/player/html5_player/skin/caption.png
--- a/upload/player/html5_player/skin/control.png
+++ b/upload/player/html5_player/skin/control.png
--- a/upload/player/html5_player/skin/loading.gif
+++ b/upload/player/html5_player/skin/loading.gif
--- a/upload/player/html5_player/skin/poster.jpg
+++ b/upload/player/html5_player/skin/poster.jpg
--- a/upload/player/html5_player/skin/quality.png
+++ b/upload/player/html5_player/skin/quality.png
--- a/upload/player/html5_player/skin/small.png
+++ b/upload/player/html5_player/skin/small.png
--- a/upload/player/html5_player/style.css
+++ b/upload/player/html5_player/style.css
@ -0,0 +1,265 @@
+/* video container */
+.videoContainer{
+	width:700px;
+	margin-left: 300px;
+	height:370px;
+	position:relative;
+	overflow:hidden;
+	background:#000;
+	color:#ccc;
+}
+
+/* video caption css */
+.caption{
+	display:none;
+	position:absolute;
+	top:0;
+	left:0;
+	width:100%;
+	padding:10px;
+	font-size:15px;
+	box-sizing: border-box;
+	-ms-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	background: #1F1F1F; /* fallback */
+	background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
+	background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
+	background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
+}
+
+/*** VIDEO CONTROLS CSS ***/
+/* control holder */
+.control{
+	background:#000;
+	color:#000;
+	position:absolute;
+	bottom:0;
+	left:0;
+	width:100%;
+	z-index:5;
+	display: block;
+	
+}
+/* control top part */
+
+/* control bottom part */
+.btmControl{
+	clear:both;
+	background: #000; /* fallback */
+	background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
+	background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
+	background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
+}
+.control div.btn {
+	float:left;
+	width:34px;
+	height:30px;
+	padding:0 5px;
+	border-right:0px solid #404040;
+	cursor:pointer;
+}
+
+.control div.btn.sound_btn{
+
+	float:left;
+}
+
+.control div.text{
+	font-size:12px;
+	font-weight:bold;
+	line-height:30px;
+	text-align:center;
+	font-family:verdana;
+	width:20px;
+	border:none;
+	color:#777;
+}
+.control div.btnPlay{
+	background:url(skin/control.png) no-repeat 0 0;
+	border-left:1px solid #404040;
+	margin-bottom: 5px;
+}
+.control div.paused{
+	background:url(skin/control.png) no-repeat 0 -29px;
+}
+.control div.btnStop{
+	background:url(skin/control.png) no-repeat 0 -57px;
+}
+.control div.spdText{
+	border:none;
+	font-size:14px;
+	line-height:30px;
+	font-style:italic;
+}
+.control div.selected{
+	font-size:15px;
+	color:#ccc;
+}
+.control div.sound{
+	background:url(skin/control.png) no-repeat -88px -28px;
+	border:none;
+	float:left;
+	margin-top: 3px;
+	margin-left: 4px;
+}
+.control div.sound2{
+	background:url(skin/control.png) no-repeat -87px -59px !important;
+}
+.control div.muted{
+	background:url(skin/control.png) no-repeat -88px -2px !important;
+}
+.control div.btnFS{
+	background:url(skin/control.png) no-repeat -50px -2px;
+	float:right;
+	margin-right: 10px;
+}
+.control div.smallscr{
+	background:url(skin/control.png) no-repeat -50px -30px !important;
+	
+	float:right;
+	margin-right: 7px;
+}
+.control div.largescr{
+	background:url(skin/control.png) no-repeat -50px -30px !important;
+}
+.control div.logo{
+	background:url(skin/control.png) no-repeat -52px -57px;
+	float:right;
+	margin-right: 10px;
+}
+.control div.small{
+	background:url(skin/small.png) no-repeat -2px 3px;
+	float:right;
+	margin-right: 10px;
+}
+.control div.quality{
+	background:url(skin/quality.png) no-repeat -5px -6px;
+	float:right;
+	margin-right: 10px;
+}
+
+/* PROGRESS BAR CSS */
+/* Progress bar */
+.progress {
+	width:100%;
+	height:7px;
+	margin-bottom: 0px;
+	position:relative;
+	float:left;
+	cursor:pointer;
+	background: #444; /* fallback */
+	background:-moz-linear-gradient(top,#666,#333);
+	background:-webkit-linear-gradient(top,#666,#333);
+	background:-o-linear-gradient(top,#666,#333);
+	box-shadow:0 2px 3px #333 inset;
+	-moz-box-shadow:0 2px 3px #333 inset;
+	-webkit-box-shadow:0 2px 3px #333 inset;
+	
+}
+.progress span {
+	height:100%;
+	position:absolute;
+	top:0;
+	left:0;
+	display:block;
+	
+}
+.timeBar{
+	z-index:10;
+	width:0;
+	background: #7f090a; /* fallback */
+	
+	
+}
+.bufferBar{
+	
+	width:0;
+	background: #5d5c5c;
+	
+	
+}
+/* time and duration */
+.time{
+	color: #fff;
+	margin-top: 10px;
+	width:15%;
+	float:left;
+	text-align:center;
+	font-size:11px;
+	line-height:12px;
+}
+
+/* VOLUME BAR CSS */
+/* volume bar */
+.volume{
+	background-color: #5d5c5c;
+	position:relative;
+	cursor:pointer;
+	width:70px;
+	height:4px;
+	float:left;
+	margin-top:15px;
+	margin-right:20px;
+	margin-left: 3px;
+}
+.volumeBar{
+	display:block;
+	height:100%;
+	position:absolute;
+	top:0;
+	left:0;
+	background-color: #7f090a;
+	z-index:10;
+}
+
+
+
+/* OTHERS CSS */
+/* video screen cover */
+.loading, #init{
+	position:absolute;
+	top:0;
+	left:0;
+	width:100%;
+	height:100%;
+	background:url(skinloading.gif) no-repeat 50% 50%;
+	z-index:2;
+	display:none;
+}
+#init{
+	background:url(skin/bigplay.png) no-repeat 50% 50% !important;
+	cursor:pointer;
+}
+
+
+
+.qualityopt{
+background-color: black;
+width: 90px;
+position: absolute;
+margin-top: 244px;
+margin-left: 500px;
+border:2px solid black;
+border-radius:2px;
+display :none;
+
+}
+
+.list{
+
+color: #e7e7e7;
+
+}
+
+.list1{
+
+
+float: left;
+}
+
+
+
+
+
+
				`@ -0,0 +1 @@`
				`<script type="text/javascript" src="{$html5_player_url}/html5_player.js"></script>`