/    Sign up×
Community /Pin to ProfileBookmark

Press key video

Copy linkTweet thisAlerts:
Mar 26.2016

Hi, I am in desperate need of help for my project. I have created a site where the background is a video, but I am wanting the background video to change to “C.mp4” when the user presses the “C” key and then returns back to the oringal video after it has been played. I am wanting to do this with many keys. I have attached below website files.

[url]http://www.megafileupload.com/na22/work.zip[/url]

Thanks

to post a comment
HTML

14 Comments(s) ↴

Copy linkTweet thisAlerts:
@Thomasleahy12authorMar 26.2016 — I am in need of help for my project. I am wanting to make a video play when a user presses the "c" key to play "c.mp4". I have created a file already but it is a looped video and would like it to play then go back to the looped video. here is a link to see my css files and html files.

http://s000.tinyupload.com/?file_id=85021974753990119554
Copy linkTweet thisAlerts:
@SempervivumMar 26.2016 — IMO it would be more convenient id you posted the URL of your page.
Copy linkTweet thisAlerts:
@Thomasleahy12authorMar 26.2016 — I don't have a url atm
Copy linkTweet thisAlerts:
@TrainMar 26.2016 — Just one threaad please.
Copy linkTweet thisAlerts:
@SempervivumMar 27.2016 — Try this:
[CODE] <video id="myvideo" src="basevideo.mp4" autoplay muted loop>
</video>
<script>
$(window).on("keydown", function (event) {
var charpressed = String.fromCharCode(event.which)
var vid = document.getElementById("myvideo");
vid.removeAttribute("loop");
vid.src = "assets/" + charpressed + ".mp4";
vid.load();
vid.play();
vid.addEventListener("ended", function () {
vid.setAttribute("loop", true);
vid.src="basevideo.mpe"
vid.load();
vid.play();
})
});
</script>
[/CODE]Note: Filenames of the videos must be in capital letters, e. g. "C.mp4".

You should additionally check whether the key is a letter.
Copy linkTweet thisAlerts:
@Thomasleahy12authorMar 27.2016 — Hi thanks for the reply. Where would I place this in my code and also how would I be able to do it for mutliple videos such as "E.MP4" when the user presses E and then the same for F.
Copy linkTweet thisAlerts:
@SempervivumMar 27.2016 — Hallo Thomas,

in the code I posted you find the video tag on top. You have to adjust your video tag according to this.

You can then place the Javascript at the bottom of your page, just before the </html>.

how would I be able to do it for mutliple videos such as "E.MP4" when the user presses E and then the same for F.[/QUOTE]Don't worry, the script does it automatically:
[CODE] var charpressed = String.fromCharCode(event.which)
// event.which is the key having been pressed, e. g. D
var vid = document.getElementById("myvideo");
vid.removeAttribute("loop");
vid.src = "assets/" + charpressed + ".mp4";
// The src attribute is set to e. g. assets/D.mp4[/CODE]
Copy linkTweet thisAlerts:
@Thomasleahy12authorMar 28.2016 — WOW. You are a hero! Thank you so much! Would I be able to add this to a Muse document or would it have to be made by normal HTML?. Again thanks!
Copy linkTweet thisAlerts:
@SempervivumMar 28.2016 — Fine that it works!

Would I be able to add this to a Muse[/QUOTE]Unfortunately I'm not familiar with Muse and cannot answer this question. Maybe someone else can.
Copy linkTweet thisAlerts:
@Thomasleahy12authorMar 28.2016 — Hmm it seems to work okay with muse, is there a code to make it it 100% width of the browser?
Copy linkTweet thisAlerts:
@Thomasleahy12authorMar 30.2016 — Fine that it works!

Unfortunately I'm not familiar with Muse and cannot answer this question. Maybe someone else can.[/QUOTE]

I have figured out how to integrate it with Muse, is it possible to have it so if there is no video for a key it would just play the looping video?
Copy linkTweet thisAlerts:
@SempervivumMar 30.2016 — The script already does it:
[CODE] vid.addEventListener("ended", function () {
vid.setAttribute("loop", true);
vid.src="basevideo.mp4" // change this to your looping video
vid.load();
vid.play();
})[/CODE]
Copy linkTweet thisAlerts:
@Thomasleahy12authorMar 30.2016 — The screen goes black when I press for example E as I do not have a video set as E.mp4
Copy linkTweet thisAlerts:
@SempervivumMar 30.2016 — I see. Unfortunately it's not easy to check whether a file exists (however it's possible). Make a list of available letters instead:
[CODE] <script>
$(window).on("keydown", function (event) {
var letters = ["A" , "B", "C", "D"];
var charpressed = String.fromCharCode(event.which)
if (letters.indexOf(charpressed) != -1) {
var vid = document.getElementById("myvideo");
vid.removeAttribute("loop");
vid.src = "assets/" + charpressed + ".mp4";
vid.load();
vid.play();
vid.addEventListener("ended", function () {
vid.setAttribute("loop", true);
vid.src="basevideo.mpe"
vid.load();
vid.play();
});
}
});
</script>[/CODE]
×

Success!

Help @Thomasleahy12 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...