<link href="${ctx}/static/css/video-js.min.css" rel="stylesheet">
<style>
body{background-color: #191919}
.m{ width: 740px; height: 400px; margin-left: auto; margin-right: auto; margin-top: 100px; }
.video-js .vjs-subtitles{
font-family: "lucida grande", "lucida sans unicode", lucida, "Helvetica Neue", helvetica, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
color: #fc6;
font-size: 2em;
line-height: 1em;
}
/*视频暂停时显示播放按钮*/
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;
}
.video-js .vjs-big-play-button{
font-size: 2.5em;
line-height: 2.3em;
height: 2.5em;
width: 2.5em;
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
border-radius: 2.5em;
background-color: #73859f;
background-color: rgba(115,133,159,.5);
border-width: 0.15em;
margin-top: -1.25em;
margin-left: -1.75em;
}
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
font-size: 1.63em;
}
/* 加载圆圈 */
.vjs-loading-spinner {
font-size: 2.5em;
width: 2em;
height: 2em;
border-radius: 1em;
margin-top: -1em;
margin-left: -1.5em;
}
/*要显示当前的播放时间，以及总共视频时长，加2行CSS解决： */
.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}
</style>
</head>
<body>
<div class="m">
<!-- <button type="button" id="bofang">播放</button> -->
<!--vjs-big-play-centered 播放按钮居中-->
<video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto" width="740" height="400"
poster="m.png" data-setup='{ "controls": true,"aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
<!-- <source src="http://jq22com.qiniudn.com/jq22-sp.mp4" type="video/mp4"> -->
<source src="http://video.699pic.com/videos/70/52/33/INbbYsww9xrz1526705233.mp4" type="video/mp4">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="${ctx}/static/jquery/jquery-1.9.1.min.js"></script>
<script src="${ctx}/static/js/video.min.js"></script>
<script type="text/javascript">
/* var myPlayer = videojs('my-video');
videojs("my-video").ready(function(){
var myPlayer = this;
myPlayer.play();
}); */
/* $("#bofang").click(function(){
}); */
</script>
</div>
</body>
<style>
body{background-color: #191919}
.m{ width: 740px; height: 400px; margin-left: auto; margin-right: auto; margin-top: 100px; }
.video-js .vjs-subtitles{
font-family: "lucida grande", "lucida sans unicode", lucida, "Helvetica Neue", helvetica, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
color: #fc6;
font-size: 2em;
line-height: 1em;
}
/*视频暂停时显示播放按钮*/
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;
}
.video-js .vjs-big-play-button{
font-size: 2.5em;
line-height: 2.3em;
height: 2.5em;
width: 2.5em;
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
border-radius: 2.5em;
background-color: #73859f;
background-color: rgba(115,133,159,.5);
border-width: 0.15em;
margin-top: -1.25em;
margin-left: -1.75em;
}
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
font-size: 1.63em;
}
/* 加载圆圈 */
.vjs-loading-spinner {
font-size: 2.5em;
width: 2em;
height: 2em;
border-radius: 1em;
margin-top: -1em;
margin-left: -1.5em;
}
/*要显示当前的播放时间，以及总共视频时长，加2行CSS解决： */
.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}
</style>
</head>
<body>
<div class="m">
<!-- <button type="button" id="bofang">播放</button> -->
<!--vjs-big-play-centered 播放按钮居中-->
<video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto" width="740" height="400"
poster="m.png" data-setup='{ "controls": true,"aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
<!-- <source src="http://jq22com.qiniudn.com/jq22-sp.mp4" type="video/mp4"> -->
<source src="http://video.699pic.com/videos/70/52/33/INbbYsww9xrz1526705233.mp4" type="video/mp4">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="${ctx}/static/jquery/jquery-1.9.1.min.js"></script>
<script src="${ctx}/static/js/video.min.js"></script>
<script type="text/javascript">
/* var myPlayer = videojs('my-video');
videojs("my-video").ready(function(){
var myPlayer = this;
myPlayer.play();
}); */
/* $("#bofang").click(function(){
}); */
</script>
</div>
</body>
7500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
