I have a video that is controlled by the user scroll, this works really nicely on safari, but on chrome it lags and jumps point to point rather than play smoothly. Is this an issue with my video file or is it something to do with my chrome?
Link to example: https://advancedriderwear.com/Updates/Feature-Test/Video/
Code:
HTML:
<div id="set-height"></div>
<div id="time"></div>
<div id="scroll"></div>
<div class="video-stick">
<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
<source type="video/webm; codecs="vp8, vorbis"" src="Beast_exploding_animation.mp4"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="Beast_exploding_animation.mp4"></source>
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="Beast_exploding_animation.mp4"></source>
<p>Sorry, your browser does not support the <video> element.</p>
</video>
</div>
CSS:
body{
background: black;
}
.space{
height: 100vh;
width: 100%;
background: black;
}
#video-stick{
position: relative;
text-align: center'
}
#set-height {
display: block;
height: 9000px;
}
#v0 {
position: fixed;
top: 50px;
height: 80%;
margin: auto;
}
#time {
position: fixed;
display: block;
top: 10px;
right: 10px;
z-index: 2;
width: 10px;
height: 10px;
border-radius: 20px;
background-color: rgba(0,0,255,0.5);
}
#scroll {
position: fixed;
display: block;
top: 10px;
right: 10px;
z-index: 2;
width: 10px;
height: 10px;
border-radius: 20px;
background-color: rgba(255,0,0,0.5);
}
JS:
// select video element
var vid = document.getElementById('v0');
var time = $('#time');
var scroll = $('#scroll');
var windowheight = $(window).height()-20;
var scrollpos = window.pageYOffset/400;
var targetscrollpos = scrollpos;
var accel = 0;
// ---- Values you can tweak: ----
var accelamount = 0.1; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing.
// pause video on load
vid.pause();
window.onscroll = function(){
//Set the video position that we want to end up at:
targetscrollpos = window.pageYOffset/400;
//move the red dot to a position across the side of the screen
//that indicates how far we've scrolled.
scroll.css('top', 10+(window.pageYOffset/5000*windowheight));
};
setInterval(function(){
//Accelerate towards the target:
scrollpos += (targetscrollpos - scrollpos)*accelamount;
//move the blue dot to a position across the side of the screen
//that indicates where the current video scroll pos is.
time.css('top', 10+(scrollpos/5000*400*windowheight));
//update video playback
vid.currentTime = scrollpos;
vid.pause();
}, 40);
Related
Basically, I coded this player for my personal video hosting site (some elements censored in this example) but when I embed a video, it aligns to the left side and gets cut off at the right side or has a black bar there if the ratio is off.
(I embedded a video from Archive.org for this example, it is by no means my own. It appears to belong to Scott Draves.)
function vidplay() {
var video = document.getElementById("SubjectVideo");
var button = document.getElementById("play");
if (video.paused) {
video.play();
} else {
video.pause();
}
}
function restart() {
var video = document.getElementById("SubjectVideo");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("SubjectVideo");
video.currentTime += value;
}
function hideControls() {
var x = document.getElementById("controls");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
background-color: black;
}
#SubjectVideo {
position: fixed;
height: 100%;
}
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}
#Data {
display: flex;
flex-wrap: wrap;
}
.EpisodeData {
text-align: right;
flex: 50%;
}
#hideButtons {
text-align: left;
flex: 50%;
}
<!DOCTYPE html>
<html>
<head>
<title>[Video title]</title>
<link rel="icon" href="../../../../favicon.ico" type="image/png" sizes="16x16">
<link rel="stylesheet" href="../../../player.css">
<script src="../../../RedirectScripts/redirect.js"></script>
<script src="../../../player.js"></script>
</head>
<body id="main" onLoad="hideControls()">
<video autoplay id="SubjectVideo" onended="NextVideo()">
<source src="https://ia801507.us.archive.org/35/items/electricsheep-flock-247-52500-0/00247%3D52640%3D52374%3D52639.mp4" type="video/mp4">
Your browser doesn't support < video >..
</video>
<div class="content">
<div id="controls">
<div id="buttonbar">
<p><center><img src="../../logo.png" width="20%"></p>
<button id="restart" onclick="restart();"><img src="../../../restart.png" alt="restart"></button>
<button id="rew" onclick="skip(-30)"><img src="../../../rewind.png" alt="rewind 30s"></button>
<button id="play" onclick="vidplay()"><img src="../../../play.png" alt="play/pause"></button>
<button id="fastFwd" onclick="skip(30)"><img src="../../../fastforward.png" alt="fast-forward 30s"></button>
</div>
</div>
<div id="Data">
<div class="hideButtons">
<button id="hide" onclick="hideControls()">Show/Hide Controls</button>
</div>
<div class="EpisodeData">
Video Title
</div>
</div>
</div>
</body>
</html>
When I insert a tag around the video, it puts the left edge of the video on the edge instead of properly centering it.
does anyone know how I could effectively center it, and put borders on the bottom and top instead of having a cutoff on the sides?
The error at the end is for an autoplay script that isn't linked here, it can be disregarded.
Add the next styles to the video tag
left: 0;
right: 0;
margin: auto;
Add this #SubjectVideo ruleset to center your <video> tag:
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-right: auto;
margin-left: auto;
It should look like this:
#SubjectVideo {
position: fixed;
height: 100%;
margin-right: auto;
margin-left: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I salute everyone.I want to make my audio player!Changing volume is not a problem.
But here's to make the music download band show the current status can not.
I did an imitation of the audio start button- it's square and the music starts.
Then I placed a rectangle inside which has a line that should be the width of the audio duration.
That's what I can't do.
in the example there is an audio tag, it is hidden, it is it I run
How to make the width of the line depending on the duration of the music?
my attempt
rect.onclick = function() {
audio.play();
rect.style.display = "none";
circle.style.display = "block";
}
circle.onclick = function() {
rect.style.display = "block";
circle.style.display = "none";
audio.pause();
audio.currentTime = 0;
}
line.width = audio.timeupdate + "%"
#audio {
display: none;
}
#rect {
width: 50px;
height: 50px;
background: red;
}
#circle {
width: 50px;
height: 50px;
border-radius: 50%;
background: green;
display: none;
}
#progress {
width: 250px;
height: 30px;
border: 1px solid #000;
padding: 0;
}
#line {
width: 1px;
height: inherit;
background: #000;
margin: 0;
}
<audio id="audio" controls>
<source src="https://sefon.pro/api/mp3_download/direct/149166/3vUCANmBX7mfWhZQzAC2W2bci3su76uyLlxX4Jsj8Fd4OK2bsVkfkZ7QbcVKyeJelmfE8631OxZYGzJvTsVm22lgsfJIaPpWDFRJx6OOq3snoWQvOrbt0yUx8buTt_Sl5ioUlnJdMfJVcK8M-7dZGTN1PIe2q6MvG8_MiQAJ/"/>
</audio>
<div id="rect"></div>
<div id="circle"></div>
<div id="progress">
<div id="line"></div>
</div>
I suggest You to research little:
How to change progress bar in loop?
Solution for Your needs:
Add function that checks every 10 ms what is audio.currentTime and set progress bar position to it in % (track position *100 / track lenght)
I'm setting up a custom audio player for my website, but I can't get it to work, how do I style the tag?
Hello all, first question I'll be asking on this website because this issue is driving me nuts. So I've been trying to make this custom audio player for my website but I'm a complete noob when it comes to javascript, but I managed to fumble my way to create an audio playlist for the default tag, however after many, MANY attempts, after looking up some tutorials, I can't seem to get this same code I have to work when I create a custom audio player as most of the tutorials I've seen only deal with a single music track.
Here's the code I'm using at the moment
HTML5:
<div id="playerbg">
<style>
#playlist{
list-style: none;
}
#playlist li a{
color: black;
text decoration:none;
}
#playlist .current-song a{
color: blue;
}
</style>
<audio src="" controls id="audioPlayer">
</audio>
<ul id="playlist">
<li class="current-song">01. Supersonic</li>
<li>02. Supersonic (Instrumental)</li>
</ul>
<script src="https://code.jquery.com/jquery-2.2.0.js">
</script>
<script src="/audioPlayer.js">
</script>
<script>
audioPlayer()
</script>
</div><!-- playerbg ends here -->
Javascript:
function audioPlayer(){
var currentSong = 0;
$("#audioPlayer")[0].src = $("#playlist li a")[0];
$("#playlist li a").click(function(e){
e.preventDefault();
$("#audioPlayer")[0].src = this;
$("#audioPlayer")[0].play();
$("#playlist li").removeClass("current-song");
currentSong = $(this).parent().index();
$(this).parent().addClass("current-song");
});
$("#audioPlayer")[0].addEventListener("ended", function(){
currentSong++;
if(currentSong == $("#playlist li a").length)
currentSong = 0;
$("#playlist li").removeClass("current-song");
$("#playlist li:eq("+currentSong+")").addClass("current-song");
$("#audioPlayer")[0].src = $("#playlist li a")[currentSong].href;
$("#audioPlayer")[0].play();
});
}
Here's the current player:
https://imgur.com/BTAYBrk
Here's what I roughly hope to achieve (with the playlist from the first image intact):
https://imgur.com/e7Xyt3N
You can not style the audio tag directly.
As I saw your code, I have it clear that you know it already. But the issue is that you need to code the JavaScript part to make it work.
Understanding JavaScript for audio tag.
When you have an HTML audio tag like this:
<audio src="your_audio.mp3"></audio>
You can reference it in your code like this:
let audio = document.querySelector("audio");
And with this, in your audio variable, you can access pretty much to every control in the audio tag. Some of them and that I think you may need are:
Methods:
play() To play the loaded audio.
pause() To pause the loaded audio.
Properties:
currentTime The time value (between 0 and 1) of the playing media.
volume The actual volume of the audio. (Value between 0 and 1)
duration The duration of the audio.
Using event listeners.
One of the most common uses of JavaScript is exactly that, event listeners. This helps your application with handling what happens on the browser (button clicks, mouse move, window resize, etc), so this will be a lot useful to create your own player and handle this events to update the real audio tag.
Based on your example of this player:
You can see a working example of a player with a similar style of your desire. Hope it helps.
Player:
var audio = document.querySelector("audio"),
playButton = document.querySelector("#audio-play"),
progress = document.querySelector("#audio-playbar"),
volumeRange = document.querySelector("#volume-range");
const play = () =>{
if(audio.paused){
console.log("play");
playButton.classList.add("paused");
audio.play();
}else{
console.log("pause");
playButton.classList.remove("paused");
audio.pause();
}
};
const bwd = () =>{
console.log("bwd");
audio.currentTime = 0;
};
const fwd = () =>{
console.log("fwd");
audio.currentTime += 5;
};
volumeRange.addEventListener("change",(event)=>{
audio.volume = event.target.value / 100;
});
audio.addEventListener("timeupdate",(e)=>{
progress.value = (e.target.currentTime / e.target.duration) * 100;
if(e.target.currentTime/e.target.duration === 1){
play();
audio.currentTime = 0;
}
});
document.querySelector("#audio-mute").addEventListener("mouseenter",(event)=>{
document.querySelector("#volume-control")
.style = "display: block;";
});
document.querySelector("#volume-control").addEventListener("mouseleave",(event)=>{
document.querySelector("#volume-control")
.style = "display: none;";
});
playButton.addEventListener("click",play);
document.querySelector("#audio-fwd")
.addEventListener("click",fwd);
document.querySelector("#audio-bwd")
.addEventListener("click",bwd);
#audio-player{
background: #005bab;
width: 300px;
height: 40px;
border-radius: 15px;
position: relative;
}
#audio-player::after{
content: "";
background: url('https://i.imgur.com/aDz7QOn.png') no-repeat;
display: block;
position: absolute;
width: 100vw;
height: 100vh;
margin-top: -8px;
margin-left: 270px;
}
#audio-play{
width: 20px;
height: 20px;
background: url('https://i.imgur.com/pOdMApr.png') no-repeat;
background-size: cover;
position: absolute;
margin: 10px;
margin-left: 15px;
cursor: pointer !important;
}
#audio-bwd{
width: 25px;
height: 15px;
background: url('https://i.imgur.com/z4j9Qp9.png') no-repeat;
background-size: cover;
position: absolute;
margin: 12px;
margin-left: 45px;
cursor: pointer !important;
}
#audio-fwd{
width: 25px;
height: 15px;
background: url('https://i.imgur.com/E7X60LH.png') no-repeat;
background-size: cover;
position: absolute;
margin: 12px;
margin-left: 75px;
cursor: pointer !important;
}
#progress{
position: absolute;
margin: 8px;
margin-left: 105px;
}
#audio-playbar{
border-radius: 0;
background: black;
height: 10px;
}
progress[value]::-webkit-progress-bar {
background-color: #000;
border-radius: 0;
}
progress[value]::-webkit-progress-value{
background: #c0c0c0;
}
.paused{
background: url('https://i.imgur.com/EwMhtwR.png') no-repeat !important;
background-size: cover;
}
#audio-mute{
width: 26px;
height: 26px;
position: absolute;
margin: 11px;
z-index: 11;
margin-left: 278px;
background: url('https://i.imgur.com/g3W1tUI.png') no-repeat;
}
#volume-control{
position: absolute;
margin-left: 230px;
display: none;
z-index: 12;
}
<audio src="http://developer.mozilla.org/#api/deki/files/2926/=AudioTest_(1).ogg">
Your browser does not support the <code>audio</code> element.
</audio>
<div id="audio-player">
<div id="controls">
<span id="audio-play"></span>
<span id="audio-bwd"></span>
<span id="audio-fwd"></span>
</div>
<div id="progress">
<progress id="audio-playbar" max="100" value="60"></progress>
</div>
<div id="mute">
<span id="audio-mute"></span>
<span id="volume-control">
<input id="volume-range" type="range" min="0" max="100">
</span>
</div>
</div>
So I have already coded other stuff to appear after a background video finishes playing using this javascript
var vid = document.getElementById("bgvid");
var vid2 = document.getElementById('akiratrailer');
vid.onended = function() {myFunction()};
function myFunction() {
vid2.style.display = "block";
document.getElementById("headline2").innerHTML = "stuff";
document.getElementById("headline3").innerHTML = "stuff";
};
How would I add a custom button (I already have the CSS for the button) to this javascript so that it may show up after the background video finishes along with the other stuff?
This is my the html for the button
<a href='newpage.html' class='button'>blah blah blah</a>
my website for reference My Website
Try this:
var vid = document.getElementById( 'bgvid' ),
vid2 = document.getElementById( 'content' );
vid.onended = function() {
vid2.style.display = 'block';
document.getElementById( 'headline2' ).innerHTML = 'stuff';
document.getElementById( 'headline3' ).innerHTML = 'stuff';
}
* {
box-sizing: border-box
}
body {
margin: 0
}
#bgvid {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%
}
#content {
display: none;
position: fixed;
overflow-y: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
text-align: center
}
#akiratrailer {
margin: 0 auto;
width: 50%
}
.button {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
text-decoration: none
}
.button:hover {
background: #ddd;
color: black
}
<video autoplay muted id="bgvid">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<div id="content">
<h2 id="headline2"></h2>
<video id="akiratrailer" controls>
<source src="http://andiviaandes.com/videos/akiratrailer.mp4" type="video/mp4">
</video>
<h2 id="headline3"></h2>
<a href='#' class='button'>blah blah blah</a>
</div>
Well you could either generate the button dynamically using the below code in onended callback
var button = document.createElement('button');
var node = document.createTextNode('Click me');
button.appendChild(node);
button.classList.add('button');
body.appendChild(button); //or any other parent element you wish to add the button to
or just simply add the button in HTML, set up the class and adjust display to 'display: none' and change it similarily to how you manipulate the headlines right now.
Here's the jsbin with a working example: http://jsbin.com/pepidedimo/edit?html,css,js,console,output
When a user clicks on an image thumbnail it triggers an opaque modal background and YouTube video player sits on top of this.
1) How would I go about making this iFrame fluid responsive when the viewport is scaled down?
2) Even assuming we can get #1 working, how would I go about getting these YouTube videos to open in the default native player on iPhone/Android rather than the scaled down modal window which I'm hoping to accomplish in #1.
Currently the modal background and YouTube modal work perfectly on Desktop, but things begin to go South around 900px and down as the browser window is scaled in. Currently on iPhone/Android the videos don't play at all, not really sure what happens.
HTML
<section class="modal-wrapper valign">
<section class="youtube-modal">
<button class="close-youtube-modal"></button>
<iframe src="http://www.youtube.com/v/OnAHIH4p5Vg?version=3&enablejsapi=1&autoplay=1" frameborder="0" allowfullscreen="allowfullscreen" class="youTubeIframe" width="854" height="480"></iframe>
</section>
CSS
section.modal-wrapper {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
text-align: center;
background: rgba(0, 0, 0, .55);
}
section.youtube-modal {
display: none;
width: 854px;
position: relative;
z-index: 1000;
background-color: transparent;
}
button.close-youtube-modal {
position: absolute;
top: 0px;
left: 0px;
width: 25px;
height: 26px;
background: url(../images/close-youtube.png) no-repeat;
cursor: pointer;
outline: none;
border: none;
}
section.youtube-modal iframe {
margin-top: 35px;
}
JS
function youTubeModal() {
var thumbnail = document.querySelectorAll('.thumbnail-container ul li'),
modalWrapper = document.querySelector('.modal-wrapper'),
youTubeModal = document.querySelector('.modal-wrapper .youtube-modal'),
youTubeIframe = document.querySelector('.youTubeIframe'),
closeVideo = document.querySelector('.close-youtube-modal'),
staticVideoContainer = document.querySelector('.staticVideoContainer'),
videoWidth = 854,
videoHeight = 480;
for (var i=0;i<thumbnail.length;i++) {
thumbnail[i].addEventListener('click', function (e) {
var data = e.target.getAttribute('data-videoid');
modalWrapper.style.display = 'block';
youTubeModal.style.display = 'inline-block';
youTubeIframe.setAttribute('src', 'http://www.youtube.com/v/' + data + '?version=3&enablejsapi=1&autoplay=1');
youTubeIframe.setAttribute('width', videoWidth);
youTubeIframe.setAttribute('height', videoHeight);
}, false);
}
staticVideoContainer.addEventListener('click', function(e) {
var data = staticVideoContainer.getAttribute('data-videoid');
modalWrapper.style.display = 'block';
youTubeModal.style.display = 'inline-block';
youTubeIframe.setAttribute('src', 'http://www.youtube.com/v/' + data + '?version=3&enablejsapi=1&autoplay=1');
youTubeIframe.setAttribute('width', videoWidth);
youTubeIframe.setAttribute('height', videoHeight);
}, false);
closeVideo.addEventListener('click', function () {
youTubeModal.style.display = 'none';
modalWrapper.style.display = 'none';
youTubeIframe.setAttribute('src', '');
}, false);
}
for responsiveness, follow this solution:
.iframe-parent {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.iframe-parent iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
added 'iframe-parent' class to the parent div of the iframe tag