Video player control with keyboard












0















I want to build a video playlist using html css javascript.
I looked through google and youtube and found relevant tutorials
But all of those controls the video using the mouse
Can anyone please direct me to a source that helps me learn video controls using the only keyboard



Thanks in advance










share|improve this question























  • one way to solve your problem is to look up the video player API, and bind the keystroke events to those player API.

    – Speir
    Nov 25 '18 at 23:04
















0















I want to build a video playlist using html css javascript.
I looked through google and youtube and found relevant tutorials
But all of those controls the video using the mouse
Can anyone please direct me to a source that helps me learn video controls using the only keyboard



Thanks in advance










share|improve this question























  • one way to solve your problem is to look up the video player API, and bind the keystroke events to those player API.

    – Speir
    Nov 25 '18 at 23:04














0












0








0








I want to build a video playlist using html css javascript.
I looked through google and youtube and found relevant tutorials
But all of those controls the video using the mouse
Can anyone please direct me to a source that helps me learn video controls using the only keyboard



Thanks in advance










share|improve this question














I want to build a video playlist using html css javascript.
I looked through google and youtube and found relevant tutorials
But all of those controls the video using the mouse
Can anyone please direct me to a source that helps me learn video controls using the only keyboard



Thanks in advance







javascript html css keyboard html5-video






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 25 '18 at 21:24









aishaish

188




188













  • one way to solve your problem is to look up the video player API, and bind the keystroke events to those player API.

    – Speir
    Nov 25 '18 at 23:04



















  • one way to solve your problem is to look up the video player API, and bind the keystroke events to those player API.

    – Speir
    Nov 25 '18 at 23:04

















one way to solve your problem is to look up the video player API, and bind the keystroke events to those player API.

– Speir
Nov 25 '18 at 23:04





one way to solve your problem is to look up the video player API, and bind the keystroke events to those player API.

– Speir
Nov 25 '18 at 23:04












1 Answer
1






active

oldest

votes


















0














var myVideo = document.getElementById("videoplayer");

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;
}





share|improve this answer
























  • <video id="videoplayer" src="your video path" controls="controls"></video>

    – kaluogh
    Nov 26 '18 at 2:06













  • Tip: after html loaded, then add script.

    – kaluogh
    Nov 26 '18 at 2:09











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53472144%2fvideo-player-control-with-keyboard%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














var myVideo = document.getElementById("videoplayer");

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;
}





share|improve this answer
























  • <video id="videoplayer" src="your video path" controls="controls"></video>

    – kaluogh
    Nov 26 '18 at 2:06













  • Tip: after html loaded, then add script.

    – kaluogh
    Nov 26 '18 at 2:09
















0














var myVideo = document.getElementById("videoplayer");

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;
}





share|improve this answer
























  • <video id="videoplayer" src="your video path" controls="controls"></video>

    – kaluogh
    Nov 26 '18 at 2:06













  • Tip: after html loaded, then add script.

    – kaluogh
    Nov 26 '18 at 2:09














0












0








0







var myVideo = document.getElementById("videoplayer");

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;
}





share|improve this answer













var myVideo = document.getElementById("videoplayer");

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;
}






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 26 '18 at 2:06









kaluoghkaluogh

344




344













  • <video id="videoplayer" src="your video path" controls="controls"></video>

    – kaluogh
    Nov 26 '18 at 2:06













  • Tip: after html loaded, then add script.

    – kaluogh
    Nov 26 '18 at 2:09



















  • <video id="videoplayer" src="your video path" controls="controls"></video>

    – kaluogh
    Nov 26 '18 at 2:06













  • Tip: after html loaded, then add script.

    – kaluogh
    Nov 26 '18 at 2:09

















<video id="videoplayer" src="your video path" controls="controls"></video>

– kaluogh
Nov 26 '18 at 2:06







<video id="videoplayer" src="your video path" controls="controls"></video>

– kaluogh
Nov 26 '18 at 2:06















Tip: after html loaded, then add script.

– kaluogh
Nov 26 '18 at 2:09





Tip: after html loaded, then add script.

– kaluogh
Nov 26 '18 at 2:09




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53472144%2fvideo-player-control-with-keyboard%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Wiesbaden

Marschland

Dieringhausen