Develop Reference

Why is this simple JS video player not working?

I can get the video to show up on the page, but it will not play. What is going wrong? (Btw...I am a newbie and am using google chrome and Visual Studio Code.)
Here is the code. I would appreciate ANY help I could get. Thanks!
var vid = document.getElementById("croninvideo");
function play() {
vid.play();
}
function pause() {
vid.pause();
}
.vplayer {
margin-top: 0;
width: 500px;
height: 380px;
}
button {
width: 80px;
height: 40px;
font-size: 16px;
font-weight: bold;
border-radius: 3px;
background-color: lightgray;
}
#video {
max-width: 700px;
height: 370px;
}
<div class="vplayer">
<video id="croninvideo" controls>
<source id="video" src="vid-Cronin.mp4" type="video/mp4">
</video>
</div>
<div class="buttonGroup">
<button onclick="play">Play</button>
<button onclick="pause">Pause</button>
</div>

To run functions you need parentheses, for example myFunction(). You're trying to call a function inside the onclick attributes without parentheses.
var vid = document.getElementById("croninvideo");
function play() {
vid.play();
}
function pause() {
vid.pause();
}
.vplayer {
margin-top: 0;
width: 500px;
height: 380px;
}
button {
width: 80px;
height: 40px;
font-size: 16px;
font-weight: bold;
border-radius: 3px;
background-color: lightgray;
}
#video {
max-width: 700px;
height: 370px;
}
<div class="vplayer">
<video id="croninvideo" controls>
<source id="video" src="vid-Cronin.mp4" type="video/mp4">
</video>
</div>
<div class="buttonGroup">
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
</div>

JQuery Set the cursor to the end of text

I am working on my jquery script to remove the link by replace the text when I click on a button. I have got a problem with the cursor because when I click at the end of the text, it will move the cursor to the start of the text, example: when I click the cursor next to 2!, it will move the cursor at the start before the Video.
When I try this:
if (target.prop("nodeName") == "A") {
unlink(target);
$('#text_editor').focus().val(selected_text);
}
$(function() {
function unlink(link) {
var txt = link.text();
var sp = $("<span>").html(txt);
link.replaceWith(sp);
}
function getObjectFromCursor() {
var obj, sel = window.getSelection() ? window.getSelection() : document.selection;
var range = sel.getRangeAt(0);
obj = $(range.startContainer.parentElement);
return obj;
}
$("#toolbar").on("click", "#toolbar_unlink", function() {
var target = getObjectFromCursor();
if (target.prop("nodeName") == "A") {
unlink(target);
selected_text = window.getSelection().getRangeAt(0).endContainer.wholeText;
$('#text_editor').focus().val(selected_text);
}
})
});
.toolbar_button_unlink_icon {
background-image: url(https://cdn.iconscout.com/icon/premium/png-256-thumb/unlink-1507684-1280083.png);
background-position: center;
background-repeat: no-repeat;
background-size: 20px;
opacity: 0.55;
}
.toolbar_button {
display: inline-block;
height: 26px;
width: 28px;
padding: 4px 6px;
outline: 0;
cursor: default;
float: left;
border: 0;
background-color: #f8f8f8;
position: relative;
}
.toolbar_button:hover {
background-color: #e5e5e5;
border: 1px solid #bcbcbc;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toolbar" class="toolbar_top" role="toolbar" style="height: 100px; user-select: none;">
<button id="toolbar_unlink" class="toolbar_button toolbar_button_unlink_icon" command="+unlink" data-toggle="tooltip" data-placement="bottom" title="Remove link (‪CTRL+SHIFT+F9)" style="user-select: none; position: relative; margin-left: 3px; margin-top: 13px; outline: none; z-index: 0;" button="" type="button"></button>
</div>
<div id="text_editor" class="editor_message" hidefocus="false" aria-label="Message Body" g_editable="true" role="textbox" aria-hidden="true" aria-multiline="true" contenteditable="true" tabindex="1" style="direction: ltr; height: 500px; width: 100%; padding-left: 25px; padding-top: 18px; font-size: 16px; border-bottom: 1px solid #d1d1d1; border-right: 1px solid #d1d1d1; border-left: 1px solid #d1d1d1; overflow-y: auto;" itacorner="6,7:1,1,0,0">
<div>Video Here 1!</div>
<div>Video Here 2!<br></div>
<div>Video Here 3!</div>
<div></div>
</div>
Here is the fiddle: https://jsfiddle.net/bL71nasw/
What I want to achieve is when I click on the text "Video Here 1!", "Video Here 2!", "Video Here 3!" or whatever it is and when I click on a button to remove the hyperlink to replace with a text, I want to move the cursor next to the text 2!, 3! or whatever it is.
Can you please show me example how I can move the cursor next to the text 1!, 2!, 3! or whatever it is in the contenteditable?
Thank you.

How to append a div thats created on a click function to another div before being deleted? Javascript

There's a <div> thats created upon a click function and it animates into to the other side of the screen. Afterwards, on "animationend", it is being deleted. However, I want to append the created element either on "animationend" or "animationstart" onto my div/class of recentTaps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Raleway"
rel="stylesheet"
/>
<link rel="stylesheet" href="./assets/css/style.css" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Tap Music</title>
</head>
<div class="recent">
<h2>Recent Taps</h2>
<hr />
<span id="recentTaps" class="recentTaps">stuf</span>
</div>
<div class="visual"></div>
<div class="pads">
<div class="pad1">
<audio src="./assets/sounds/bubbles.mp3" class="sound"></audio>
</div>
<div class="pad2">
<audio class="sound">
<source src="./assets/sounds/ufo.mp3" />
</audio>
</div>
<div class="pad3">
<audio class="sound">
<source src="./assets/sounds/clay.mp3" />
</audio>
</div>
<div class="pad4">
<audio class="sound">
<source src="./assets/sounds/confetti.mp3" />
</audio>
</div>
<div class="pad5">
<audio class="sound">
<source src="./assets/sounds/glimmer.mp3" />
</audio>
</div>
<div class="pad6">
<audio class="sound">
<source src="./assets/sounds/moon.mp3" />
</audio>
</div>
</section>
Above, you can see my HTML code.
Below is my Javascript:
window.addEventListener("load", () => {
const sounds = document.querySelectorAll(".sound");
const pads = document.querySelectorAll(".pads div");
const visual = document.querySelector(".visual");
//const recent = document.getElementById("recentTaps");
const colors = [
"#60d394",
"#d36060",
"#c060d3",
"#d3d160",
"#6860d3",
"#60b2d3"
];
//lets get going with the sound here
pads.forEach((pad, index) => {
pad.addEventListener("click", function() {
sounds[index].currentTime = 0;
sounds[index].play();
createBubbles(index);
});
});
//Create a function that makes bubbles
const createBubbles = index => {
const bubble = document.createElement("div");
visual.appendChild(bubble);
bubble.style.backgroundColor = colors[index];
bubble.style.animation = "jump 3s ease";
bubble.addEventListener("animationend", function() {
visual.removeChild(bubble);
});
};
});
CSS is below:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
}
hr {
border: 1px solid black;
width: 75%;
}
.recent {
height: 10vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.recent span {
width: 100%;
display: flex;
}
.app {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
header h1 {
margin: 50px 0px 30px 0px;
text-align: center;
font-size: 40px;
}
header p {
font-size: 20px;
}
.pads {
background: lightblue;
width: 100%;
display: flex;
}
.pads > div {
height: 100px;
width: 100px;
flex: 1;
}
.pad1 {
background: #60d394;
}
.pad2 {
background: #d36060;
}
.pad3 {
background: #c060d3;
}
.pad4 {
background: #d3d160;
}
.pad5 {
background: #6860d3;
}
.pad6 {
background: #60b2d3;
}
.visual > div {
position: absolute;
bottom: 0%;
height: 50px;
width: 50px;
border-radius: 50%;
transform: scale(1);
z-index: -1;
}
#keyframes jump {
0% {
bottom: 0%;
left: 20%;
}
33% {
bottom: 60%;
left: 20%;
}
66% {
bottom: 60%;
left: 80%;
}
100% {
bottom: 0%;
left: 80%;
}
}
I've tried appendChild() on "animationend" and vice-versa. The console gives me an error. I've also tried, append(). I'm going for an append on my other div before it's deleted and while still deleting the element that created on the original div.

I am trying to insert a chunk of html code dynamically with Javascript reading smaple json, but unable to do so

Went through a few questions on stackoverflow but could not solve the error.
The intention is to modify and add html to the main document reading a JSON structure.
Uncaught TypeError: Cannot read property 'appendChild' of undefined
Update 1:-
Typo was corrected, marked in code.
Defer was introduced at script load in head section, this makes sure the entire document is loaded before the script starts execution.
Here I am trying to read a JSON, and then looping across its content to add to my main html document.
var json={
"fruit":[
{
"fruitname":"Apple",
"location":"data/png/apple.png",
"quantity":"25",
"price":"2"
},
{
"fruitname":"Mango",
"location":"data/png/mango.png",
"quantity":"35",
"price":"3"
}
]
};
//var cards = document.getElementsByClassName("content"); -- corrected typo
var cards = document.getElementById("content");
var fruits = json.fruit;
//alert(fruits.length);
//alert(fruits[1].fruitname);
for (var i = 0; i < fruits.length; i++) {
var cardelement=document.createElement('div');
cardelement.className = 'card';
// alert(cardelement);
cards.appendChild(cardelement);
var object = document.createElement('div');
object.className = 'object';
// alert(object);
cardelement.appendChild(object);
var image = document.createElement('img');
image.setAttribute("src", fruits[i].location);
object.appendChild(image);
var objectback = document.createElement('div');
objectback.className = 'object-back';
cardelement.appendChild(objectback);
var backfruit = document.createElement('div');
backfruit.className = 'back-fruit';
backfruit.innerHTML = fruits[i].fruitname;
objectback.appendChild(backfruit);
var backprice = document.createElement('div');
backprice.className = 'back-price';
backprice.innerHTML = fruits[i].price + "$ per unit";
objectback.appendChild(backprice);
var backquantity = document.createElement('div');
backquantity.className = 'back-quantity';
backquantity.innerHTML = "In Stock " + fruits[i].quantity + " units";
objectback.appendChild(backquantity);
}
*
{
margin: 0 0;
border: none;
text-align:center
}
#header
{
background-color: #F44336;
font-family: 'Bungee Shade', cursive;
font-size: 30px;
height: 20%
}
#footer
{
font-family: 'Roboto', sans-serif;
position: fixed;
height: 80%;
width: 100%
}
#content
{
width: 75%;
height: 100%;
border-right: thick solid #F44336;
float: left;
text-align: left;
overflow: scroll
}
#cart
{
background-color:#3F51B5;
width: 25%;
border-bottom: thick dashed #F44336;
float: right
}
.card
{
display:inline-block;
width: 100px;
height: 100px;
margin: 40px;
padding: 20px;
box-shadow: -1px 9px 20px 4px #000000;
border: 5px solid #F44336;
border-radius: 26px 26px 26px 26px;
transition: all .2s ease-in-out
}
.object .object-back
{
display:block;
position:static
}
.object-back
{
display: none
}
.object img
{
height: 100px;
width: 100px
}
.back-fruit
{
font-size: 20px;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: thin solid
}
.back-price
{
font-size: 12px;
padding-bottom: 5px
}
.back-quantity
{
font-size: 10px;
padding-bottom: 10px
}
.back-pluscart
{
font-size: 15px;
background-color: #F44336;
width: auto
}
.back-pluscart img
{
height: 30px;
width: 30px
}
.card:hover
{
box-shadow: -1px 9px 46px 11px #000000
}
.card:hover .object
{
display: none
}
.card:hover .object-back
{
display:inline-block;
opacity: 1
}
<!DOCTYPE html>
<html>
<head>
<title> The Shopkeeper </title>
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "style/style.css" />
<script type="text/javascript" src="logic/core.js" defer></script>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="base">
<div id="header">
<h1> Fruitkart </h1>
</div>
<div id="footer">
<div id="content">
<!--
<div class="card">
<div class="object">
<img src="data/png/apple.png" />
</div>
<div class="object-back">
<div class="back-fruit">Apple</div>
<div class="back-price">2$ per unit</div>
<div class="back-quantity">In Stock 25 pieces </div>
<div class="back-pluscart"> <img src="data/png/cart.png" /> </div>
</div>
</div>
-->
</div>
<div id="cart">
django
is a big boy
</div>
</div>
</div>
</body>
</html>

Why was content undefined
You try to get content by ClassName
var cards = document.getElementsByClassName("content")[0];
But find content in your html:
<div id="content">
Notice that the ID is content. Either change it to class="content" or change the previous code to document.getElementByID("content");

Two issues:
There is no element with class content. On the other hand there is an element with that id. So you probably want to do:
document.getElementById("content");
The script runs too soon -- the elements are not loaded yet when it runs. Either put the script just before the closing </body> tag, or put the code inside an event handler, like
window.addEventListener('DOMContentLoaded', function() {
// your code
});

You are trying to access an element with class name content var cards =document.getElementsByClassName("content")[0]; & there is no class named content
You can modify your code like this ,
var cards = document.getElementById("content");
var json={
"fruit":[
{
"fruitname":"Apple",
"location":"data/png/apple.png",
"quantity":"25",
"price":"2"
},
{
"fruitname":"Mango",
"location":"data/png/mango.png",
"quantity":"35",
"price":"3"
}
]
};
var cards = document.getElementById("content");
var fruits = json.fruit;
//alert(fruits.length);
//alert(fruits[1].fruitname);
for (var i = 0; i < fruits.length; i++) {
var cardelement=document.createElement('div');
cardelement.className = 'card';
// alert(cardelement);
cards.appendChild(cardelement);
var object = document.createElement('div');
object.className = 'object';
// alert(object);
cardelement.appendChild(object);
var image = document.createElement('img');
image.setAttribute("src", fruits[i].location);
object.appendChild(image);
var objectback = document.createElement('div');
objectback.className = 'object-back';
cardelement.appendChild(objectback);
var backfruit = document.createElement('div');
backfruit.className = 'back-fruit';
backfruit.innerHTML = fruits[i].fruitname;
objectback.appendChild(backfruit);
var backprice = document.createElement('div');
backprice.className = 'back-price';
backprice.innerHTML = fruits[i].price + "$ per unit";
objectback.appendChild(backprice);
var backquantity = document.createElement('div');
backquantity.className = 'back-quantity';
backquantity.innerHTML = "In Stock " + fruits[i].quantity + " units";
objectback.appendChild(backquantity);
}
*
{
margin: 0 0;
border: none;
text-align:center
}
#header
{
background-color: #F44336;
font-family: 'Bungee Shade', cursive;
font-size: 30px;
height: 20%
}
#footer
{
font-family: 'Roboto', sans-serif;
position: fixed;
height: 80%;
width: 100%
}
#content
{
width: 75%;
height: 100%;
border-right: thick solid #F44336;
float: left;
text-align: left;
overflow: scroll
}
#cart
{
background-color:#3F51B5;
width: 25%;
border-bottom: thick dashed #F44336;
float: right
}
.card
{
display:inline-block;
width: 100px;
height: 100px;
margin: 40px;
padding: 20px;
box-shadow: -1px 9px 20px 4px #000000;
border: 5px solid #F44336;
border-radius: 26px 26px 26px 26px;
transition: all .2s ease-in-out
}
.object .object-back
{
display:block;
position:static
}
.object-back
{
display: none
}
.object img
{
height: 100px;
width: 100px
}
.back-fruit
{
font-size: 20px;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: thin solid
}
.back-price
{
font-size: 12px;
padding-bottom: 5px
}
.back-quantity
{
font-size: 10px;
padding-bottom: 10px
}
.back-pluscart
{
font-size: 15px;
background-color: #F44336;
width: auto
}
.back-pluscart img
{
height: 30px;
width: 30px
}
.card:hover
{
box-shadow: -1px 9px 46px 11px #000000
}
.card:hover .object
{
display: none
}
.card:hover .object-back
{
display:inline-block;
opacity: 1
}
<!DOCTYPE html>
<html>
<head>
<title> The Shopkeeper </title>
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "style/style.css" />
<script type="text/javascript" src="logic/core.js" ></script>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="base">
<div id="header">
<h1> Fruitkart </h1>
</div>
<div id="footer">
<div id="content">
<!--
<div class="card">
<div class="object">
<img src="data/png/apple.png" />
</div>
<div class="object-back">
<div class="back-fruit">Apple</div>
<div class="back-price">2$ per unit</div>
<div class="back-quantity">In Stock 25 pieces </div>
<div class="back-pluscart"> <img src="data/png/cart.png" /> </div>
</div>
</div>
-->
</div>
<div id="cart">
django
is a big boy
</div>
</div>
</div>
</body>
</html>

Having a div with buttons over a video

I have a video in my page and I would like to have a div with specific controls over the video instead of the regular ones.
I have tried setting the div to absolute but even though the buttons appear, they are not clickable.
Is there any way (without jquery) to do this where the buttons in the div are above the video and clickable?
Video:
<div id="divVideo" style="text-align:center">
<video id="video1" width="720" autoplay loop>
<source src="01_vid.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
Buttons (they have a small script):
<button type="button" onclick="playPause(this)" class="btn btn-primary">▮&#9646</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
Script (probably unnecessary):
var myVideo = document.getElementById("video1");
function playPause(btn) {
if (myVideo.paused) {
myVideo.play();
btn.innerHTML = "▮&#9646"
} else {
myVideo.pause();
btn.innerHTML = "&#9658"
}
}
function muteUnmute(etc) {
if (myVideo.muted) {
myVideo.muted = false
etc.innerHTML = "Mute"
} else {
myVideo.muted = true;
etc.innerHTML = "Unmute"
}
}
function goHD(el) {
if (myVideo.width != 1280){
myVideo.width = 1280
el.innerHTML = "SD"
}
else{
myVideo.width = 720
el.innerHTML = "HD";
}
}
This is my CSS:
#botoes {
float: center;
position: absolute;
bottom: 0; z-index: 1;
width: 100%;
text-align: center;
margin-bottom: 10px;
}
#divVideo {
position: relative;
width: 720px;
float: left;
height: 405px;
}
#video {
position: relative;
width: 720px;
height: 405px;
background-color: blue;
float: left;
display: block;
}
How do I make the buttons float over the video (that is inside a div)?

I cannot add a realistic video here. So imagine the image to be a video.
.video {position: relative; width: 350px;}
.video img {display: block;}
.video .buttons {position: absolute; bottom: 0; z-index: 1; width: 100%; text-align: center;}
<div class="video">
<img src="http://placehold.it/350x150" />
<div class="buttons">
<button type="button" onclick="playPause(this)" class="btn btn-primary">▮&#9646</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
</div>
</div>
If you wanna make it only appear once you hover your mouse over the video, there you go:
.video {position: relative; width: 350px;}
.video img {display: block;}
.video .buttons {position: absolute; bottom: 0; z-index: 1; width: 100%; text-align: center; display: none;}
.video:hover .buttons {display: block;}
<div class="video">
<img src="http://placehold.it/350x150" />
<div class="buttons">
<button type="button" onclick="playPause(this)" class="btn btn-primary">▮&#9646</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
</div>
</div>

video {
width: 300px;
height: auto;
}
div {
background: rgba(255, 255, 255, .85);
height: 50px;
width: 500px;
position: relative;
top: -50px;
padding: 5px;
}
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png">
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm" />
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg" />
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div>
<button>Start</button>
<button>End</button>
</div>