我正在尝试克隆直播频道。 我从数据库中获取该特定时间的视频,将其加载到播放器中。用jquery在播放时间寻找视频播放器,不要让用户向前搜索视频。在计算视频的当前和结束时间的差异之后,我将页面设置为在该时间之后重新加载以加载下一个视频。
这是HTML
<meta http-equiv="refresh" content="<?php echo $reload_sec; ?>" >
<link href="http://vjs.zencdn.net/5.8.0/video-js.css" rel="stylesheet"
>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<div class="main-content container">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<div align="center" class="embed-responsive embed-responsive-4by3">
<video id="my-video" class="video-js embed-responsive-item" controls preload="auto" width="840" height="264" data-setup="{}" autoplay="1">
<source src="<?php echo base_url('uploads/channelvideos/'.$file) ?>" 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>
</div>
<button onclick="setCurTime()" type="button" class="btn btn-info" style="margin-top:5px"><span class="fa fa-television"></span> Live</button>
</div>
<div class="col-sm-1">
<input type="text" name="seektime" id="seektime" value="<?php echo $seek_at; ?>" />
</div>
</div>
</div>
<script src="http://vjs.zencdn.net/5.8.0/video.js"></script>
现在Jquery
<script type="text/javascript">
function setCurTime()
{
location.reload();
}
var vid = document.getElementById("my-video");
vid.onloadedmetadata = function()
{
$(window).on("load", function()
{
var seektimej = $("#seektime").val();
if (document.getElementById("my-video"))
{
videojs("my-video").ready(function()
{
var myPlayer = this;
setTimeout(function()
{
//Set initial time to seeked time
myPlayer.currentTime(seektimej);
setTimeout(function()
{
var currentTime = 0;
myPlayer.on("seeking", function(event)
{
if (currentTime < myPlayer.currentTime())
{
myPlayer.currentTime(currentTime);
}
});
myPlayer.on("seeked", function(event)
{
if (currentTime < myPlayer.currentTime())
{
myPlayer.currentTime(currentTime);
}
});
setInterval(function()
{
if (!myPlayer.paused())
{
currentTime = myPlayer.currentTime();
}
}, 10);
}, 50);
}, 50);
});
}
});
};
</script>