I have a button,here on click of the button I want to upload the video file and render one after other on multiple click.Its working fine but I am not able to add controls here,I need to add controls also dynamically.
Here is the plunker https://plnkr.co/edit/umHmYGJvT1a8WnVFxXAH?p=preview in which you can upload a video file and render it.but in that html5 video there is no controls.Here is code below.
html
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
<input type="file" id="file1" name="image" accept="video/*" capture style="display:none" />
<span id="upfile1" style="cursor:pointer">upload button1</span>
</p>
<div id="demo1">
<script src="js/index.js"></script>
style.css
/* Styles go here */
input {
font-size: 20px;
height: 50px;
}
.imagediv {
float: left;
margin-top: 50px;
}
.imagediv .showonhover {
background: red;
padding: 20px;
opacity: 0.9;
color: white;
width: 100%;
display: block;
text-align: center;
cursor: pointer;
}
#upfile1 {
background: red;
padding: 20px;
opacity: 0.9;
color: white;
width: 10%;
display: block;
text-align: center;
cursor: pointer;
}
#demo img,
#demo1 img {
width: 200px;
height: auto;
display: block;
margin-bottom: 10px;
}
#demo1 video{
width:300px;
}
index.js
// Code goes here
$(document).ready(function(e) {
//$('video').on('click',function(){
$("#demo1").delegate("video", "click", function(){
this.paused?this.play():this.pause();
});
$("#upfile1").click(function() {
$("#file1").trigger('click');
});
$('input:file').change(
function(){
if ($(this).val()) {
$("#demo1").show();
}
}
);
var inputs = document.querySelectorAll('input[type=file]');
inputs.forEach(function(input) {
input.onchange = function() {
var file = this.files[0];
displayAsImage(file);
};
});
function displayAsImage(file) {
var imgURL = URL.createObjectURL(file),
img = document.createElement('video');
img.onload = function() {
URL.revokeObjectURL(imgURL);
};
img.src = imgURL;
document.getElementById("demo1").appendChild(img);
$("video").prop("controls",true);
}
$("video").prop("controls",true);
});
Use the controls attribute in video tags.
Example:
<video src="" controls></video>
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;
}
Is there any reason as to why I cannot get the Upload button to display the name of the file(s) uploaded despite copying exactly the tutorial on YouTube - see link below?
In the tutorial e is used for the eventListener function in JS, but Adobe Dreamweaver is having none of it, so I used addEventListener
Thanks in advance for any insight. :)
https://www.youtube.com/watch?v=JML3BZo_ToA&list=PLQ0Y5YcHFmjVCFO7t1_72VU2FiXo5XaEI&index=1
$(document).ready(function(){
"use strict";
$("#uploadBtn").on("change", function(){
var files = $(this)[0].files;
if(files.length >= 2){
$("#label_span").text(files.length + " files ready to upload");
} else {
var filename = addEventListener.target.value.split('\\').pop();
$("#label_span").text(filename);
}
});
});
.uploadFile{
height: auto;
padding: 30px;
background-color: #E0DDDD;
color: #797979;
}
#uploadBtn{
display: none;
width: auto;
}
.uploadButtonLabel{
font-size:18px;
padding: 10px 40px;
border-style: none;
margin-top: 10px;
text-align: center;
}
.uploadButtonLabel:before{
font-family: fontAwesome;
content: "\f093";
margin-right: 10px;
}
.uploadButtonLabel:hover{
cursor: pointer;
}
<head>
<script type="text/javascript" src="../JS Documents/bookCastingJS.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<div class="uploadFile">
<h2>Upload your documents...</h2>
<p>Please ensure that you upload your require documents. Failure to do will may delay your applications.</p>
<label for="uploadBtn" class="uploadButtonLabel calltoActionButton" id="label_span">Select file(s) to upload</label>
<input style="width: 25%;" type="file" id="uploadBtn" name="upload" multiple = "true" />
</div>
<script src="bookCastingJS.js"></script>
You can just use your files variable instead.
$(document).ready(function() {
"use strict";
$("#uploadBtn").on("change", function() {
var files = $(this)[0].files;
if (!files) return;
if (files.length > 1) {
$("#label_span").text(files.length + " files ready to upload");
} else {
var filename = files[0].name;
$("#label_span").text(filename);
}
});
});
.uploadFile {
height: auto;
padding: 30px;
background-color: #E0DDDD;
color: #797979;
}
#uploadBtn {
display: none;
width: auto;
}
.uploadButtonLabel {
font-size: 18px;
padding: 10px 40px;
border-style: none;
margin-top: 10px;
text-align: center;
}
.uploadButtonLabel:before {
font-family: fontAwesome;
content: "\f093";
margin-right: 10px;
}
.uploadButtonLabel:hover {
cursor: pointer;
}
<head>
<script type="text/javascript" src="../JS Documents/bookCastingJS.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<div class="uploadFile">
<h2>Upload your documents...</h2>
<p>Please ensure that you upload your require documents. Failure to do will may delay your applications.</p>
<label for="uploadBtn" class="uploadButtonLabel calltoActionButton" id="label_span">Select file(s) to upload</label>
<input style="width: 25%;" type="file" id="uploadBtn" name="upload" multiple="true" />
</div>
<script src="bookCastingJS.js"></script>
I'm trying to find a way to transition from one background image to another when I hover a div.
Here's a demo:
codepen demo
Here's my code
$('#cat').hover(function(){
$('.image').css('background-image',
"url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb')");
});
Any ideas?
First, you are missing IDs for your <h1>, because your JQuery select elements with ID cat, dog and rabbit.
seccond, what you should change is background of '.bg' class, not '.image' class
HTML
<h1 id="cat">CAT</h1>
<h1 id="dog">DOG</h1>
<h1 id="rabbit">RABBIT</h1>
JS
$('#cat').hover(function(){
$('.bg').css('background-image', "url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb')");
});
$('#dog').hover(function(){
$('.bg').css('background-image', "url('https://images.unsplash.com/photo-1469225208447-8329cbd3cb3a')");
});
$('#rabbit').hover(function(){
$('.bg').css('background-image', "url('https://images.unsplash.com/photo-1478754351612-f8b7577a3859')");
});
demo : https://jsfiddle.net/z2hevmya/
var images = {
"cat":'https://images.unsplash.com/photo-1485198963969-3f6b12e49abb',
"dog" : 'https://images.unsplash.com/photo-1469225208447-8329cbd3cb3a',
"rabbit" : 'https://images.unsplash.com/photo-1478754351612-f8b7577a3859'
};
$('.menu').hover(function(){
var img = $(this).attr("id");
$('.bg').css('background-image', "url(" + images[img] + ")");
});
body {
margin: 0;
padding: 0;
}
h1 {
z-index: 100;
color: #456;
font-family: sans-serif;
position: relative;
opacity: .5;
transition: all ease 1s;
cursor: pointer;
height: 1em;
padding: .5em;
margin: 0;
}
h1:hover {
opacity: 1;
}
.bg {
position: fixed;
height: 100%;
width: 100%;
background: url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb') no-repeat center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bg"></div>
<h1 id="cat" class="menu">CAT</h1>
<h1 id="dog" class="menu">DOG</h1>
<h1 id="rabbit" class="menu">RABBIT</h1>
<script language="javascript">
$(function () {
$('.mDiv').hover(function () {
$(this).addClass('divHover');
}, function () {
$(this).removeClass('divHover');
}
);
});
</script>
<style type="text/css">
.mDiv {
height: 300px;
width: 200px;
background: darkgrey;
border: solid 1px #ccc;
float: left;
margin-right: 10px;
}
.divHover{
// background-image: you " img url";
background: greenyellow;
}
</style>
<div id="d">
<div class="mDiv">Test</div>
</div>
Good morning world! I've got another problem with my project, this time the JavaScript isn't working, I want the picture to change when I'm holding my mouse pointer over it, thanks for your patience!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
<title>Konst UF</title>
<meta charset="utf-8" />
<script type="text/javascript" language="javascript">
if (screen.width <= 699) {
document.location = "mobile.html";
}
document.getElementById("Orderbutton").onclick = function () {
location.href = "http://www.youtube.com/";
};
function billFunction() {
var Bill = getElementById("BillGate");
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
</script>
<body>
<p class="madeby">Made by Albin Karlsson and Oliver Jansson</p>
<center>
<ul>
<li>
<p class="Home">Home</p>
</li>
<li>
<p class="Products">Products</p>
</li>
<li>
<p class="About">About Us</p>
</li>
</ul>
</center>
<center><p class="para1">Konst UF</p></center>
<center>
<img
id="BillGate"
src="bill-gates.jpg"
alt="Bill Gates"
class="Billgates"
onmouseover="billFunction()"
/>
</center>
<marquee><h2>Bill GATES</h2></marquee>
<div></div>
<div class="sidepanels1">
<center>
<img class="Konstbild" src="Konst_uf_1.jpg" alt="Konst" />
</center>
<h2>Unknown</h2>
<p>I have no idea haha</p>
</div>
<div class="sidepanels2">
<center>
<img class="Konstbild" src="mikrofiberduk-konst.jpg" alt="Monalisa" />
</center>
<center><h2>Mona Lisa</h2></center>
<center>
<p>Mona Lisa is a painting which was painted by Leonardo Da Vinci</p>
</center>
</div>
<center>
<button
id="Orderbutton"
type="button"
onclick="location.href = 'http://www.youtube.com/';"
>
Order Our Products
</button>
</center>
</body>
</head>
</html>
That was the html code and I hope you could find the problem, if you need the css I got it too:
body {
background-color: grey;
border: grey solid 1px;
}
p.para1 {
margin: auto;
width: 40%;
border: 3px solid black;
padding: 20px;
background-color: black;
color: white;
font-size: 30px;
}
div.sidepanels1 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
right: 10px;
width: 320px;
height: 550px;
text-align: center;
margin-top: 40px;
}
div.sidepanels2 {
border: 5px dotted green;
background-color: grey;
position: absolute;
top: 10px;
left: 10px;
width: 320px;
height: 550px;
margin-top: 40px;
}
p.iframe {
position: absolute;
top: 20px;
text-align: center;
}
div.2nd {
background-color: black;
color: white;
}
img.asus-logo {
width: 1200px;
margin-left: auto;
margin-right: auto;
border: 2px solid black;
}
img.Billgates {
margin-top: 30px;
border: 2px solid black;
margin-bottom: 40px;
}
img.Konstbild {
margin-top: 20px;
width: 300px;
height: 300px;
border: 3px solid green;
margin-right: auto;
margin-left: auto;
}
ul {
list-style-type: none;
}
p.madeby {
position: fixed;
}
Thank you !
Lets take a look at your billFunction, as there are a few problems with this function.
function billFunction() {
var Bill = getElementById('BillGate');
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
First of all, getting the element of your desire requires you to use document.getElementById, rather than just getElementById. Changing that should give you the correct element.
Next, you are setting img.src, but variable img is never defined. I assume this should be Bill.src instead. (Side note, I want to advise you to use lowerCamelCase variable names)
Last, your logic for checking which image to use looks wrong. Bill (capital B) can never be in bill-gates. Changing this logic using all lowercase should work.
You will get something along the lines of:
function billFunction() {
var bill = document.getElementById('BillGate');
if (bill.src.match("bill")) {
bill.src = "bill-gates.jpg";
} else {
bill.src = "Card.jpg";
}
}
In your JavaScript change this
function billFunction(img) {
var Bill = document.getElementById('BillGate');
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
And in your HTML
<img id="BillGate" src="screenshot_tweet.png" alt="Bill Gates" class="Billgates" onmouseover="billFunction(this)"/>
Also you should comment the onclick code before, it's causing you problems.
A better solution would be to do this only with CSS. It's much easier.
#bill {
background-image: url("bill-gates.jpg");
}
#bill:hover {
background-image: url("Card.jpg");
}
function billFunction() {
var Bill = getElementById('BillGate');
if (img.src.match("Bill")) {
img.src = "bill-gates.jpg";
} else {
img.src = "Card.jpg";
}
}
Corrected One:
$("img").hover(function(){
$(this).attr("src","bill.jpg");
},function(){
$(this).attr("src","card.jpg")
});
So I am developing a reader for my comic and since the images take some time to download I wanted to preload them. Doing so meant having to create a Progress to display the progress of pages being downloaded before the reader can start reading it. I have it set up as you can see on this link here
I was wondering if there was a simple light weight code I can use to improve on. I was considering using Pace.JS but if there is a more light weight simple alternative then I'd prefer that cause I also want to learn how the ProgressBar works and perhaps improve it and learn more :D
If you check the link provided above it shows the page with the code I will put below implemented. After the pages load I will put jquery to hide the loading div. If possible can there be a way to also change the text alongside the download bar?
Sorry for so many questions, still learning >~<
HTML
<div id="loading">
<img id="loading_logo" class="animated infinite bounce" src="source_images/new_logo_compressed.png" />
<div id="progressbar">
<div></div>
</div>
<div class="text">Loading... 30%</div>
</div>
<div id="button_text">Next Page</div>
<div id="button_text">Last Page</div>
<div >
<img id="manga" src="source_images/00.jpg" />
</div>
CSS
#loading {
background-color: black;
opacity: 0.75;
position: fixed;
z-index:1;
height:100%;
width:100%;
}
#loading_logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 30vh;
padding-bottom: 5vh;
width: 20vw;
}
#progressbar {
border: 3px solid #fff;
border-radius: 20px;
padding: 2px;
margin-left: 20vw;
margin-right: 20vw;
}
#progressbar > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
width: 30%;
height: 18px;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 20px;
}
.text {
color: #fff;
margin-top: 15px;
font-size: 21px;
font-weight: bold;
text-align: center;
}
Jquery (that makes reader work)
var count = 0;
var images = ["source_images/00.jpg", "source_images/01.jpg", "source_images/02.jpg", "source_images/03.jpg", "source_images/04.jpg", "source_images/05.jpg", "source_images/06.jpg"];
// Preloading Images
$.preloadImages = function() {
for (var i = 0; i < arguments.length; i++) {
$("<img />").attr("src", arguments[i]);
}
}
$.preloadImages("source_images/00.jpg", "source_images/01.jpg", "source_images/02.jpg", "source_images/03.jpg", "source_images/04.jpg", "source_images/05.jpg", "source_images/06.jpg");
$(function manga () {
$("#left").click(function () {
++count;
var img = images[count % images.length];
//alert(img);
$("#manga").attr("src", img);
//alert("clicked");
//manga();
});
$("#right").click(function () {
if(count == 0)
{
count = images.length-1;
}
else {
--count;
}
var img = images[count % images.length];
//alert(img);
$("#manga").attr("src", img);
//alert("clicked");
//manga();
});
//manga();
});
This works
var imgs = { "first":0,"last":6, "path":"http://chocobento.x10.mx/chocobento/source_images/", "current":0},
images = [],
width = 0,
pct = Math.ceil(100/(imgs.last-imgs.first))
count=0;
function preload() {
for (var i=imgs.first;i<=imgs.last;i++) {
images[i] = new Image();
images[i].onload=progress;
}
next();
}
function next() {
if (imgs.current > imgs.last) {
$("#loading").hide(); // or setTimeout(function() {$("#loading").hide(); },200);
return;
}
images[imgs.current].src=imgs.path+pad(imgs.current)+".jpg";
imgs.current++;
}
function pad(num) { return num >= 10?num:("0"+num).slice(-2);}
function progress() {
width+=pct;
if (width>100) width=100;
$("#progressbar>div").css({"width":width+"%"});
$(".text").html("Loading... "+width+"%");
next();
}
$(function() {
preload();
$("#left").click(function () {
++count;
if (count>imgs.last) count = imgs.first; // wrap
$("#manga").attr("src", images[count].src);
});
$("#right").click(function () {
--count;
if(count < imgs.first) count = imgs.last; // wrap
$("#manga").attr("src", images[count].src);
});
});
#loading {
background-color: black;
opacity: 0.75;
position: fixed;
z-index:1;
height:100%;
width:100%;
}
#loading_logo {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 30vh;
padding-bottom: 5vh;
width: 20vw;
}
#progressbar {
border: 3px solid #fff;
border-radius: 20px;
padding: 2px;
margin-left: 20vw;
margin-right: 20vw;
}
#progressbar > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
width: 1%;
height: 18px;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 20px;
}
.text {
color: #fff;
margin-top: 15px;
font-size: 21px;
font-weight: bold;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="loading">
<img id="loading_logo" class="animated infinite bounce" src="http://chocobento.x10.mx/chocobento/source_images/new_logo_compressed.png" />
<div id="progressbar">
<div></div>
</div>
<div class="text">Loading... 0%</div>
</div>
i would prefer pace.JS as you already mentioned.. in this post someone tries something similar: How to show a running progress bar while page is loading
If u wanna start learning jquery u can go here: http://www.jquery-tutorial.net/
there is a nice documentation about DOM manipulation & Ajax Calls. That will help you
You can accomplish that without using Pace.Js. This only needs jQuery
$.ajax({
xhr: function()
{
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with upload progress
console.log(percentComplete);
}
}, false);
//Download progress
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with download progress
console.log(percentComplete);
}
}, false);
return xhr;
},
type: 'POST',
url: "/",
data: {},
success: function(data){
//Do something success-ish
}
});