Autoplay video start time same as clock time - javascript

I have a 24 hour video that I want it to start at the same time of what time it current is. For example, if it is 06:24:12 a.m, the video will autoplay and start at hour 6 minute 24 12 seconds. Right now it does not seem like it is starting at all.
$(document).ready(function(){
function checkTimeAndPlay() {
var date = new Date();
var vid = document.getElementById("myVideo");
vid.currentTime = (date.getHours()*3600) + (date.getMinutes()*60) + date.getSeconds();
vid.play();
checkTimeAndPlay();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Clock</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<video id="myVideo" width="640" height="360" controls>
<source src="assets\video\clockvid.mp4" type="video/mp4">
</video>
</body>
</html>
`

You're missing a curly bracket there:
$(document).ready(function(){
function checkTimeAndPlay() {
var date = new Date();
var vid = document.getElementById("myVideo");
vid.currentTime = (date.getHours()*3600) + (date.getMinutes()*60) + date.getSeconds();
vid.play();
} // <= missing
checkTimeAndPlay();
});
It's a good idea to look at the errors in your browser's console or whatever environment you're using to execute code.

Related

How to dynamically display the video timestamp in html5 js

Ive this html code which reads a video file and plays it in browser. I want the video timestamp to be displayed dynamically but nothing is getting displayed in the browser.
<title>VIDEO PLAY</title>
<script src="http://vjs.zencdn.net/4.6.1/video.js"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"/>
<body>
<h1>VIDEO PLAY</h1>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
data-setup='{ "playbackRates": [0.5, 1, 1.5, 2, 4] }'>
<source src="movie.m4v" type='video/mp4' />
<track src='br.srt' kind="subtitles" srclang="en" label="English" default />
</video>
<script type="text/javascript">
var vid = document.getElementById("my_video_1");
var curTime=vid.currentTime;
</script>
<h1>
the value for number is:
<script type="text/javascript">
document.write(curTime)
</script>
</h1>
</body>
Solved by simply adding this after </video>
<p>TimeStamp: <span id="demo"></span></p>
<script>
// Get the audio element with id="my_video_1"
var aud = document.getElementById("my_video_1");
// Assign an ontimeupdate event to the audio element, and execute a function if the current playback position has changed
aud.ontimeupdate = function() {myFunction()};
function myFunction() {
// Display the current position of the audio in a p element with id="demo"
document.getElementById("demo").innerHTML = aud.currentTime;
}
</script>
You should use the event 'dateupdate':
function formatTime (time) {
let t = parseInt(time);
return parseInt(t/60) + ':' + (t%60 < 10 ? '0' + t%60 : t%60);
}
function setCurrentTime () {
let currentTime = getElementsByClassName('current-time')[0];
currentTime.innerHTML = formatTime(video.currentTime);
}
EventUtil.addHandler(video, 'timeupdate', getCurrentTime);

html5 movie playlist, How to Count file

i have this code for autoplay (playlist) movie
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Movie Playlist</title>
<script>
var videoPlayer;
var video_count = 1;
window.onload = function (){
videoPlayer = document.getElementById("homevideo");
videoPlayer.addEventListener("ended", function (){
video_count++;
if (video_count == 6) video_count = 1;
var nextVideo = video_count+".mp4";
videoPlayer.src = nextVideo;
}, false);
}
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div style="width:100%;margin:0px auto;">
<video id="homevideo" width="100%" autoplay autobuffer src="1.mp4"></video>
</div>
on the code above, i have 5 .mp4 movie, but if i have more than 5 .mp4 movie, the 6.mp4, 7.mp4 and other will not be played. so, how can i dynamically set the movie count pure using html5 or javascript?
You are better off having your server provide this information.
But for your existing approach, I'm assuming your video names are in sequential order ... so 1.mp4, 2.mp4, 3.mp4, etc ... so you could keep looping through the videos while increasing the count, and once a video fails to load at a given video_count, you can know that it is the limit and loop back to the start if you wanted.
function videoExists(videoUrl){
var http = new XMLHttpRequest();
http.open('HEAD', videoUrl, false);
http.send();
return http.status != 404;
}
So, for example ...
var videoPlayer;
var video_count = 1;
var video_max = 0;
window.onload = function (){
videoPlayer = document.getElementById("homevideo");
videoPlayer.addEventListener("ended", function (){
var nextVideo = (video_count+1)+".mp4";
if(video_count <= video_max || videoExists(nextVideo)){
videoPlayer.src = nextVideo;
video_count++;
}else{
video_max = video_count;
//reset back to original video
video_count = 1;
videoPlayer.src = video_count+".mp4";
}
}, false);
}
I didn't test the code, but you should get the idea. Please let me know if you have any questions about this approach.

HTML5 Video: canPlayType() is not working in safari

I tried below code written on developer.apple.com but it throw error says:
TypeError: 'undefined' is not a function (evaluating 'myVideo.canPlayType(myTypes[i])')
<!doctype html>
<html>
<head>
<title>JavaScript Fallback</title>
<script type="text/javascript">
function checkPlaylist() {
var playAny = 0;
myTypes = new Array ("video/mp4","video/ogg","video/divx");
var nonePlayable = "Your browser cannot play these movie types."
var myVideo = document.getElementsByTagName('video')[0];
for (var i = 0, len = myTypes.length; i < len; x++) {
var canPlay = myVideo.canPlayType(myTypes[i]);
if ((canPlay == "maybe") || (canPlay == "probably"))
playAny = 1;
}
if (playAny == 0)
document.getElementById("video-player").innerHTML = nonePlayable;
}
</script>
</head>
<body onload="checkPlaylist()" >
<div id="video-player" align=center>
<video controls height="200" width="400">
<source src="myMovie.m4v" type="video/mp4">
<source src="myMovie.oga" type="video/ogg">
<source src="myMovie.dvx" type="video/divx">
</video>
</div>
</body>
</html>
Check your myTypes array parameter in Safari browser with below script:
<!DOCTYPE html>
<html>
<body>
<p>Can my browser play DIVX videos? <span>
<button onclick="supportType(event,'video/divx','H.264')" type="button">Test</button>
</span></p>
<p>Can my browser play MP4 videos? <span>
<button onclick="supportType(event,'video/mp4','avc1.42E01E, mp4a.40.2')" type="button">Test</button>
</span></p>
<p>Can my browser play OGG videos? <span>
<button onclick="supportType(event,'video/ogg','theora, vorbis')" type="button">Test</button>
</span></p>
<script>
function supportType(e,vidType,codType) {
var vid = document.createElement('video');
isSupp = vid.canPlayType(vidType+';codecs="'+codType+'"');
if (isSupp == "") {
isSupp = "No";
}
e.target.parentNode.innerHTML = "Answer: " + isSupp;
}
</script>
</body>
</html>
Are you in Safari for Windows? If so that will probably fail. Safari for windows is no longer supported by Apple.
Also you have var i = 0, len = myTypes.length; i < len; x++.
The last x should be i.

Playing a loop of videos by javascript

I am trying to write code to play a continous loop of two videos. I have tried to do so by this code, but it has not been done. Being new to html5 and javascript need help to make required corrections.
<!doctype html>
<html><head>
<script>
var videoSource = new Array();
videoSource[0]="videfirst.mp4";
videoSource[1]="videosecond.mp4";
var videoCount = videoSource.length;
document.getElementById("myVideo").setAttribute("src",videoSource[0]);
function videoPlay(videoNum)
{
document.getElementById("myVideo").setAttribute("src",videoSource [videoNum]);
document.getElementById("myVideo").load();
document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener ('ended',myHandler,false);
function myHandler() {
i++;
if(i == (videoCount-1)){
i = 0;
videoPlay(i);
}
else{
videoPlay(i);
}
}
</script>
</head>
<body>
<video controls height="180" width="300" id="video" >
</video>
</body>
</html>

Javascript Function to Autoplay Random HTML Audio After Delay

I am trying to write some javascript code with some jQuery that will play a random sound file (selected from an array) to play periodically by setting a random amount of time to delay between sounds. So far, I have gotten the random song selector to work. However, there seems to be an issue with the recursion in the playMusic function. Only two songs will play back-to-back then stop with no delay between the songs.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var randInterval = 0;
var songList = ["song1","song2","song3","song4","song5"];
var songHTML;
function getRandomSong(){
var randSong = songList[Math.floor(Math.random()*songList.length)];
songHTML = "<source src='music/" + randSong + ".mp3'>" +
"<source src='music/" + randSong + ".ogg'>";
return songHTML;
}
function setRandomInterval(){
randInterval = Math.floor((Math.random()*60)+60);
return randInterval;
}
function playMusic(){
var delayTime = setRandomInterval();
$(document).ready(function(){
$('#myAudio').html(getRandomSong());
$('#myAudio').prop("volume", 0.05);
$('#myAudio').get(0).play();
});
$('#myAudio').on('ended', function(){
$('#myAudio').delay(delayTime).queue(function(){
return playMusic();
});
});
}
</script>
</head>
<body onload="playMusic()">
<div>
<audio controls id="myAudio" autoplay>
</audio>
</div>
</body>
</html>
I figured out how to do this. Below is the code that works correctly. I removed any JQuery related code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var randInterval = 0;
var songList = ["song1","song2","song3","song4","song5"];
var myAudio = new Audio("music/" + songList[Math.floor(Math.random()*songList.length)] + ".mp3");
//Generates a random song, sets it attributes/properties, and
//appends a file extension that works with the browser.
function getRandomSong(){
var randSong = songList[Math.floor(Math.random()*songList.length)]
if (myAudio.canPlayType('audio/mp3;')) {
myAudio.src="music/" + randSong + ".mp3";
} else {
myAudio.src="music/" + randSong + ".ogg";
}
myAudio.id="myAudio";
myAudio.volume=0.15;
myAudio.load();
myAudio.controls=false
myAudio.preload=false;
}
//Sets a random interval for the setTimeout Function with the
//'variation' parameter being a random amount of time in
//seconds, and the 'range' parameter being a set amount of time
//in seconds.
function getRandomInterval(variation, range){
randInterval = Math.floor((Math.random()*1000*variation)+(1000*range));
return randInterval;
}
//Gets a random song and plays that song.
function playMusic(){
getRandomSong();
myAudio.play();
}
</script>
</head>
<body>
<script type="text/javascript">
//Plays music on page load.
playMusic();
//Event Listener that will start a new song after a pause
//of randomly determined length.
myAudio.addEventListener('ended', function(){setTimeout(function(){playMusic();}, getRandomInterval(2,2));}, false);
</script>
</body>
</html>

Categories

Resources