<html>
<head>
<title>Doctor Page</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.onload = function callButtonClickEvent() {
setTimeout(function () { playSound(); }, 2000);
};
$( document ).ready(function() {
$('#source')[0].play();
});
function playSound() {
document.title = "(1) Doctor Page"
var filename = "eventually";
var mp3Source = '<source src="' + filename + '.mp3" type="audio/mpeg">';
var oggSource = '<source src="' + filename + '.ogg" type="audio/ogg">';
var embedSource = '<embed hidden="true" autostart="true" loop="false" src="' + filename + '.mp3">';
document.getElementById("sound").innerHTML = '<audio id="source">' + mp3Source + oggSource + embedSource + '</audio>';
}
</script>
</head>
<body>
<!-- Will try to play bing.mp3 or bing.ogg (depends on browser compatibility) -->
<button id="btnplay" onclick="setTimeout(function(){ playSound(); }, 500);">Play</button>
<div id="sound"></div>
</body>
</html>
You're trying to use <audio id ="source"> before creating it. Move the content of playSound to the document.ready block (before $('#source')[0].play();), and the problem is solved (I hope...).
Sorry for my English if I made mistakes.
Related
I am trying to add a word in my between by src using JavaScript, by getting that word from another div element. Running it results in the following error:
Cannot set property 'src' of null`
Here's my code:
<html><head></head><body>
<div id='content'></div>
<script>
function handleResponse(response) {
var post_number = Object.keys(response.items).length; //number of posts
for (i=0; i<post_number; i++) {
document.getElementById("content").innerHTML += "<div class='posts'><h1>" + response.items[i].title + "</h1>" + response.items[i].content + '</div>';
}
}
</script>
<div id='myImg'>Lists</div>
<script id='demo' src=""></script>
<script>
var x = document.getElementById("myImg").innerHTML;
var y= document.getElementById("demo"); y.src="https://www.googleapis.com/blogger/v3/blogs/5039479718685240371/posts?labels="+x+"&callback=handleResponse&key=AIzaSyDxfWmXTRnO5yIp25NvuUEBWKSa_5mqjHA";
</script>
</body>
</html>
Try This:
<script>
var x = document.getElementById("myImg").innerHTML;
var s = document.createElement( 'script' );
s.setAttribute('src', "https://www.googleapis.com/blogger/v3/blogs/5039479718685240371/posts?labels=" + x + "&callback=handleResponse&key=AIzaSyDxfWmXTRnO5yIp25NvuUEBWKSa_5mqjHA");
document.body.appendChild(s);
</script>
I am using Node.js + Express + Jade + Socket.io to set up click events in one browser to trigger a click on a button in another. I am having difficulty getting this to work. The code I have so far is:
Client side (index.jade):
var socket = io.connect('http://localhost:8080');
$('#buttonLeft').tap(function() {
socket.emit('keyLeft');
});
});
Server side:
var sockets = {};
io.sockets.on('connection', function (socket) {
socket.on('keyLeft', function(){
socket.broadcast.emit('keyLeft');
});
});
Another client side (index.php):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="slider-style.css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<?php
$imagesTotal = 8; // SET TOTAL IMAGES IN GALLERY
?>
<div class="galleryContainer">
<div class="galleryPreviewContainer">
<div class="galleryPreviewImage">
<?php
for ($i = 1; $i <= $imagesTotal; $i++) {
echo '<img class="previewImage' . $i . '" src="images/image' . $i . '.jpg" width="900" height="auto" alt="" />';
}
?>
</div>
<div class="galleryPreviewArrows">
<a id="previousSlideArrow" href="#" class="previousSlideArrow"><</a>
<a id="nextSlideArrow" href="#" class="nextSlideArrow">></a>
</div>
</div>
<script type="text/javascript">
// init variables
var imagesTotal = <?php echo $imagesTotal; ?>;
var currentImage = 1;
var thumbsTotalWidth = 0;
$('a.galleryBullet' + currentImage).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");
$('div.description' + currentImage).addClass("visible");
// PREVIOUS ARROW CODE
$('a.previousSlideArrow').click(function() {
$('img.previewImage' + currentImage).hide();
$('a.galleryBullet' + currentImage).removeClass("active");
$('a.thumbnailsimage' + currentImage).removeClass("active");
$('div.description' + currentImage).removeClass("visible");
currentImage--;
if (currentImage == 0) {
currentImage = imagesTotal;
}
$('a.galleryBullet' + currentImage).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");
$('img.previewImage' + currentImage).show();
$('div.description' + currentImage).addClass("visible");
return false;
});
// ===================
// NEXT ARROW CODE
$('a.nextSlideArrow').click(function() {
$('img.previewImage' + currentImage).hide();
$('a.galleryBullet' + currentImage).removeClass("active");
$('a.thumbnailsimage' + currentImage).removeClass("active");
$('div.description' + currentImage).removeClass("visible");
currentImage++;
if (currentImage == imagesTotal + 1) {
currentImage = 1;
}
$('a.galleryBullet' + currentImage).addClass("active");
$('a.thumbnailsimage' + currentImage).addClass("active");
$('img.previewImage' + currentImage).show();
$('div.description' + currentImage).addClass("visible");
return false;
});
// ===================
</script>
<script src="http://mojoer.kr:8080/socket.io/socket.io.js"></script>
<script src="slide-script.js></script>
</body>
</html>
Any help would be really appreciated. Thanks~
I tried to reproduce your setup with the following code:
server:
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.get('/', function (req, res) {
res.render('index');
});
io.on('connection', function (socket) {
socket.on('left', function () {
socket.broadcast.emit('leftButtonClicked');
});
socket.on('right', function () {
socket.broadcast.emit('rightButtonClicked');
});
});
http.listen(3000, function(){
console.log('listening on port 3000');
});
jade client:
doctype html
html
body
h1 Testing socket.io
h3(id="status") not connected
buttons
button#leftButton Prev
button#rightButton Next
br
h3 actions:
p#actions
script(src="/socket.io/socket.io.js")
script.
var socket = io();
socket.on('connect', function() {
document.getElementById("status").innerHTML = "connected";
});
document.getElementById("leftButton").addEventListener('click', function () {
socket.emit('left');
document.getElementById("actions").innerHTML += "Prev button click sent<br>";
});
document.getElementById("rightButton").addEventListener('click', function () {
socket.emit('right');
document.getElementById("actions").innerHTML += "Next button click sent<br>";
});
html gallery:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js"></script>
</head>
<body>
<div>
<div id="preview" style="padding: 5px;"></div>
<div id="fullSize" class="fullgalleryPreviewImage" style="padding: 5px;"></div>
<div style="padding: 5px;">
<button id="previousSlideArrow" style="height: 4em; width=100px;"><</button>
<button id="nextSlideArrow" style="height: 4em; width=100px;">></button>
</div>
</div>
<script type="text/javascript">
// init variables
var imagesTotal = 8;
var currentImage = 1;
for (var i = 1; i <= imagesTotal; i++) {
document.getElementById('preview').innerHTML += '<img class="previewImage' + i + '"src="images/image' + i + '.jpg" + width="200" height="auto" style="margin-left: 2px;" />';
}
document.getElementById('fullSize').innerHTML = '<img src="images/image' + currentImage + '.jpg" + width="800" height="auto" />';
// PREVIOUS ARROW CODE
document.getElementById('previousSlideArrow').addEventListener('click', function () {
currentImage--;
if (currentImage === 0) {
currentImage = imagesTotal;
}
document.getElementById('fullSize').innerHTML = '<img src="images/image' + currentImage + '.jpg" + width="800" height="auto" />';
});
// NEXT ARROW CODE
document.getElementById('nextSlideArrow').addEventListener('click', function () {
currentImage++;
if (currentImage === imagesTotal + 1) {
currentImage = 1;
}
document.getElementById('fullSize').innerHTML = '<img src="images/image' + currentImage + '.jpg" + width="800" height="auto" />';
});
// socket.io
var socket = io("http://localhost:3000");
socket.on('connect', function () {
console.log('connected');
});
socket.on('leftButtonClicked', function () {
document.getElementById('previousSlideArrow').click();
});
socket.on('rightButtonClicked', function () {
document.getElementById('nextSlideArrow').click();
});
</script>
</body>
</html>
It works - when you click buttons in the jade client you can browse the gallery in the html client.
Please move the socket.io loader <script src="http://mojoer.kr:8080/socket.io/socket.io.js"></script> to the <head> section - if you have it at the end of the <body> it is not loaded yet when you execute var socket = io(<server address>); and you should see the error Uncaught ReferenceError: io is not defined in your browser's console.
I am making a video website and so far I haven't styled it much yet so it's just videos on a blank page.
I have made it so that videos don't buffer until you click the thumbnail on the page. I added code to pause the video when you click it while it's playing and also play it again when it's clicked again.
I set it so the controls show on the HTML video but there's one problem. When you click on the video itself to pause it works fine, but when you click anything on the controls bar at the bottom it also pauses. And on top of that when you click the play/pause button on the actually control bar, the button pauses the video but it then instantly starts playing again because my function for playing when video is clicked fires.
How can I make it so the on click events don't work on the controls bar?
Another issue also is that when in fullscreen, the click on video to pause feature doesn't work at all. How do I fix that? I know that's quite a few questions in one post. Sorry :D
I looked everywhere and couldn't find answers. Heres my HTML and my JavaScript. The website is here: https://googledrive.com/host/0BxOngeQ9zGOeeHdlS3YyUFluVkk/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Project Bluebar</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="javascript/vidloader.js"></script>
</head>
<body>
<noscript><h1>JavaScript is disabled! The page will not function properly.</h1><br><br></noscript>
<div id="1"><br><br><img class="video" onclick="vidcl('media/1.mp4', 'media/1.png', '1', '480', '480', 'i1', 'media/1mo.png');" id="i1" onmouseover="thumbch('i1', 'media/1mo.png');" onmouseout="thumbak('i1', 'media/1.png');" src="media/1.png" width="480" height="480"></div>
<div id="2"><br><br><img class="video" onclick="vidcl('media/2.mp4', 'media/2.png', '2', '640', '480', 'i2', 'media/2mo.png');" id="i2" onmouseover="thumbch('i2', 'media/2mo.png');" onmouseout="thumbak('i2', 'media/2.png');" src="media/2.png" width="640" height="480"></div>
<div id="3"><br><br><img class="video" onclick="vidcl('media/3.mp4', 'media/3.png', '3', '360', '360', 'i3', 'media/3mo.png');" id="i3" onmouseover="thumbch('i3', 'media/3mo.png');" onmouseout="thumbak('i3', 'media/3.png');" src="media/3.png" width="360" height="360"></div>
<div id="4"><br><br><img class="video" onclick="vidcl('media/4.mp4', 'media/4.png', '4', '400', '300', 'i4', 'media/4mo.png');" id="i4" onmouseover="thumbch('i4', 'media/4mo.png');" onmouseout="thumbak('i4', 'media/4.png');" src="media/4.png" width="400" height="300"></div>
</body>
</html>
and the JavaScript
var cs;
var no;
for(var x = 1; x < 5; x++){
no = x.toString();
cs = 'img' + no + ' = new Image(); img' + no + ".src = 'media/" + no + "mo.png';";
eval(cs);
}
var video;
var imgm;
var vidm;
var idm = '';
var widm;
var heim;
var imidm;
var hovimm;
function cla(){
video = document.getElementById('av');
if(video.paused){
video.play();
}else{
video.pause();
}
};
function vidcl(vid, img, id, wid, hei, imid, hovim){
if(idm !== ''){
document.getElementById(idm).innerHTML = '<br><br><img class="video" onclick="' + "vidcl('" + vidm + "', '" + imgm + "', '" + idm + "', '" + widm + "', '" +heim + "', '" + imidm + "', '" + hovimm + "');" + '" id="' + imidm + '" onmouseover="thumbch(' + "'" + imidm + "', '" + hovimm + "');" + '" onmouseout="thumbak(' + "'" + imidm + "', '" + imgm + "');" + '" src="' + imgm + '" width="' + widm + '" height="' + heim + '">';
}
vidm = vid;
imgm = img;
idm = id;
widm = wid;
heim = hei;
imidm = imid;
hovimm = hovim;
window.location.hash = id;
document.getElementById(id).innerHTML = '<br><br><video id="av" class="video" ondblclick="fs();" onclick="cla();" src="' + vid + '" width="' + wid + '" height="' + hei + '" autoplay loop controls>';
};
window.onkeydown = function(event){
video = document.getElementById('av');
if(event.keyCode === 32){
event.preventDefault();
if(video.paused){
video.play();
}else{
video.pause();
}
}
};
function thumbch(id, ims){
document.getElementById(id).src = ims;
};
function thumbak(id, ims){
document.getElementById(id).src = ims;
};
function fs(){
video = document.getElementById('av');
if(video.requestFullScreen){
video.requestFullScreen();
}else if(video.msRequestFullScreen){
video.msRequestFullScreen();
}else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}else if(video.webkitRequestFullScreen){
video.webkitRequestFullScreen();
}
};
I figured it out myself. I disabled the default video controls and the context menu so that they the controls can't be re-enabled through it and I made my own controls.
I'm a beginner of JavaScript. I want to play a mp4 file from a specific time for a certain time in HTML5. First, I want to load a thumbnail image. And if it is clicked, I'd like to play the video file from the particular time. This is my code. But it doesn't start from 6. It just starts from the beginning. What did I do wrong?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function PlayVideo(anchor,vid, start_time, end_time, video_file) {
document.getElementById(anchor).outerHTML =
"<video id='" + vid + "' controls width='320'> <source src='" + video_file + "'
type='video/mp4'/></video>"
var video = document.getElementById(vid);
video.play();
video.currentTime = start_time;
video.addEventListener('timeupdate', function() {
if(this.currentTime > end_time) {
this.pause();
this.currentTime = start_time;
}
});
document.getElementById(aid).style.display = "none";
}
</script>
</head>
<body>
<a id="anchor" onclick="PlayVideo('anchor','003', 5, 9, 'test.mp4');"><img src ="test.jpg" alt="trail" /></a>
</body>
</html>
try
document.getElementById(anchor).outerHTML =
"<video id='" + vid + "' controls width='320'> <source src='" + video_file + "'
type='video/mp4'/></video>";
Notice the
;
I want to append data I fetched from server to a div tag, but I can't get it to work. That's HTML with a div tag to which I'd like to append data from the JS code.
HTML:
<body onload="initialize()">
<div id="text"></div>
</body>
And here is JavaScript code. I would like to replace document.write with a function that will append data to a div tag.
JS:
function initialize() {
$.getJSON('http://www.wawhost.com/izdelava-mobilne-aplikacije-2-del/fetch.php?callback=?', function (data) {
for (var i = 0; i < data.length; i++) {
document.write('<img src="' + data[i].image + '" />' + data[i].title + data[i].description + '<br>');
}
});
}
Fiddle: http://jsfiddle.net/GDxtf/
I just started learning JavaScript. Help will be greatly appreciated :)
Paste this code in the bottom of your HTML document, right before </body>:
<script>
// If you're not using an HTML5 doctype, use <script type="text/javascript> instead of just <script>
$(function () {
$targetDiv = $("#text");
$.getJSON('http://www.wawhost.com/izdelava-mobilne-aplikacije-2-del/fetch.php?callback=?', function (data) {
for (var i = 0; i < data.length; i++) {
var $div = $("<div />");
var $img = $("<img />");
$img.attr("src", data[i].image);
$img.appendTo($div);
var $title = $("<h2>" + data[i].title + "</h2>");
$title.appendTo($div);
var $description = $("<p>" + data[i].description + "</p>");
$description.appendTo($div);
$div.appendTo($targetDiv);
}
});
});
</script>
Did this solve your problem?