<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CustomVideoPlayer._Default" %>
<?xml version="1.0" encoding="UTF-8">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="video-js.css" rel="stylesheet" type="text/css" />
<script src="video.js" type="text/javascript"></script>
<script type="text/javascript" >
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<%-- <track kind="captions" src="demo.captions.vtt" srclang="en" label="adeel"></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9-->
--%>
</video>
</div>
</form>
</body>
</html>
Change css property
.vjs-default-skin .vjs-big-play-button {
left: 8em;
top: 2.5em;
font-size: 3em;
display: block;
z-index: 2;
position: absolute;
width: 4em;
height: 2.6em;
text-align: center;
vertical-align: middle;
cursor: pointer;
opacity: 1;
/* Need a slightly gray bg so it can be seen on black backgrounds */
/* background-color-with-alpha */
background-color: #07141e;
background-color: rgba(7, 20, 30, 0.7);
border: 0.1em solid #3b4249;
/* border-radius */
-webkit-border-radius: 0.8em;
-moz-border-radius: 0.8em;
border-radius: 0.8em;
/* box-shadow */
-webkit-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
-moz-box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
box-shadow: 0px 0px 1em rgba(255, 255, 255, 0.25);
/* transition */
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
No comments :
Post a Comment