播放暂停按钮适用于HTML5视频和此Video.JS.我不确定为什么其他功能对于video.js不起作用,即使它们适用于HTML5视频?
我可以做些什么来让视频JS向前和向后跳15秒?此外,由于一些奇怪的原因,视频也不会改变大小.
<div id="instructions">
<video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px"
controls preload="none" poster='http://video-js.zencoder.com/oceans-clip.jpg'
data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
</video>
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<button onclick="restart();">Restart</button>
<button onclick="skip(-10)">Rewind</button>
<button onclick="skip(10)">Fastforward</button>
</div>
<script>
//controls for video.js HTML5 video player
var myVideo = document.getElementById("my_video_1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
function skip(value) {
var video = document.getElementById("my_video_1");
video.currentTime += value;
}
function restart() {
var video = document.getElementById("my_video_1");
video.currentTime = 0;
}
</script>
Run Code Online (Sandbox Code Playgroud)
const video=document.getElementById("videoId");
forward=()=>{
skip(15);
}
backward=()=>{
skip(-15);
}
skip=(time)=>{
video.currentTime=video.currentTime+time;
}
Run Code Online (Sandbox Code Playgroud)
用于使用箭头键进行控制
document.addEventListener("keydown",(e)=>{
if(e.keyCode==37){ //left arrow
backward()
}else if(e.keyCode==39){ //right arrow
forward()
}
}
)
Run Code Online (Sandbox Code Playgroud)
小智 6
它有点晚了但我使用currentTime是这样的:
var video = videojs($("#player_id"));
video.currentTime(video.currentTime() + 10);
Run Code Online (Sandbox Code Playgroud)
希望这会有所帮助.