HTML 5 video not playing - javascript

I have a simple form where a user can enter input a name and submit , when user enter the user name, automatically the video is played in iframe, when user click submit, I want to open a new page which contain a video automatically the video should play when user click submit.
Here is what I have gone so far:
Form page HTML.
<!DOCTYPE html>
<html>
<head>
<title>Wideo iframe</title>
<!-- Website Font style -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/form.css">
</head>
<body>
<iframe id="videoframe" src="videoframe.html"></iframe>
<br />
<div class="container">
<div class="row main">
<div class="main-login main-center">
<h5>WYP: Formularz.</h5>
<form id="formData" name="contact" role="form" method="post" action="thankspage.html" target="_blank">
<div class="form-group">
<label for="name" class="cols-sm-2 control-label">Imie</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name" />
</div>
</div>
</div>
<input type="submit" id="button" value="submit" class="btn btn-primary btn-lg">
</form>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="js/form.js" type="text/javascript"></script>
</html>
here is form.js
//form script
$(document).ready(function () {
$(window).resize(resizeIframe);
$(window).resize();
//play a video when user enter aa name
$("input#name").on("change", function () {
document.getElementById('videoframe').contentWindow.postMessage( "event=fieldchanged&fieldtype=" + "name" + "&value=" + $("input#name").val(), "*");
});
// play a video when a user clicks submit button this is not working !!!!!!!
$("#button").on("click", function(){
document.getElementById('videoframe').contentWindow.postMessage(
JSON.stringify({
event: 'submitSlide()'
}), "*")
})
});
function resizeIframe() {
console.log($("iframe#videoframe").width()*576/1024 );
$("iframe#videoframe").height( $("iframe#videoframe").width()*576/1024 );
}
here is videogframe.js
var autoplay = true;
var movieName1 = "./videos/videoplayback.mp4"
var movieThanks = "./videos/darasa.mp4"
function resizeFunction() {
$("#videowrapper").height($("#videowrapper").width() * 576 / 1024);
}
window.addEventListener("message", receiveMessage, false);
function receiveMessage(eventPosted) {
var values = eventPosted.data.split("&");
var event = values[0].split("=")[1];
var fieldtype = values[1].split("=")[1];
var value = values[2].split("=")[1];
console.log(event, fieldtype, value);
switch (event) {
case "fieldchanged":
switch (fieldtype) {
case "name":
openSlide("nameSlide", {
value: value
});
case "submit":
openSlide("submitSlide", {
value: value,
});
break;
default:
break;
}
break;
default:
console.log("Event not supported");
break;
}
}
function openSlide(slideName, params) {
switch (slideName) {
case "nameSlide":
openName(params);
break;
case "submitSlide":
openSubmit(params);
break;
}
}
var params = null;
function openName(_params) {
playVideo(movieName1);
}
function openSubmit(_params){
playVideo(movieThanks);
}
// function top play video
function playVideo(src) {
$("#playervideo").attr("src", src);
$("#playervideo")[0].muted = false;
if (autoplay == true) {
var playPromise = $("#playervideo")[0].play();
if (playPromise !== undefined) {
playPromise.then(function () {}).catch(function () {
if (autoplay == true) {
$("#video-unmute-button").addClass("show");
$("#playervideo")[0].muted = true;
var playPromise2 = $("#playervideo")[0].play();
playPromise2.then(function () {
}).catch(function () {
$("#video-start-button").addClass("show");
$("#video-start-button").on("click", function () {
$("#playervideo")[0].muted = false;
$("#playervideo")[0].play();
$("#video-start-button").removeClass("show");
});
});
console.log("pause force");
} else {
}
});
} else {}
} else {
}
}
Here video frame html page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Wideo iframe</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="videowrapper">
<video id="playervideo" controls></video>
<canvas id="videocanvas" width="1024" height="576"></canvas>
<div id="testform"><input type="text"/></div>
</div>
</body>
<script src="jslibs/howler.min.js"></script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="js/videoframe.js" type="text/javascript"></script>
</html>
Am using post messege for communication.
Everything works as expected except when I click submit , it just open new page without playing a video .
UPDATE: please any one does not understand what I want , down
Here is repo for what I am trying to do : Video frame
just clone the repo run the page named formpage.html, start filling
the form u will see automatically video plays, but when u click the
submit button just opnes the page but the video is not playing : Test
it your self
UPDATE: to be more specific I want to use post message like this by adding event listner.
// play a video after the user click submit button
$("input#button").on("click", function () {
document.getElementById('videoframe').contentWindow.postMessage( "event=fieldchanged&fieldtype=" + "submit" + "&value=" + $("input#button").val(), "*");
});
Why my video is not playing? what am I doing wrong? thanks.

The problem is actually very simple, it's not working because you're putting the video tag inside the iframe tag in your thankspage.html, remove the iframe tag and add the muted flag and it should work.
So change this
<iframe id="videoframe" src="videoframe.html">
<video width="320" height="240" controls autoplay>
<source src="./video/janusz.mp4" type="video/mp4">
</video>
</iframe>
to this :
<video width="320" height="240" controls autoplay muted>
<source src="./videos/janusz.mp4" type="video/mp4">
</video>
This will of course break your CSS, but you can easily manage to resize it accordingly afterwards by putting the video tag inside a div and manipulate the div.
As you can see here : https://jsfiddle.net/8xfq9urh/

Related

Audio not loading immediately after going on

If you go here and immediately press the left-most image, and press the play button, it doesn't play. I tested this on Chrome. It works properly on Firefox.
The replit project has 6 files. 3 are the mp3 files, and the rest is an HTML, JS and CSS file.
Here is the code:
// gerates a img button, which gives a modal with the audio
// WARNING! Make sure the variable name doesn't have spaces, because it will be
// the actual HTML class
var make_audio_img_modal = function (img_file_name, audio_file_name, name){
// append to img parent div
var img_parent = document.getElementById("display-img-parent")
img_parent.innerHTML += `<img src="${img_file_name}" alt="${name}" class="display-img" onclick="document.getElementsByClassName('modal-link')[${document.getElementsByClassName('modal-link').length}].click();">`
// append to modal link div
var modal_link = document.getElementById("modal-links")
modal_link.innerHTML += `<p><a class="modal-link" href="#${name}-modal" rel="modal:open"></a></p>`
// append to modal div
var modals = document.getElementById("modals")
modals.innerHTML += `<div id="${name}-modal" class="modal">
<p style="text-align: center;"><audio controls preload="auto" class="audio" preload="false">
<source src="${audio_file_name}" type="audio/mpeg">
Your browser does not support the audio element.
</audio></p>
</div>`
var audio_element = document.createElement("AUDIO")
audio_element.setAttribute("src",audio_file_name);
modals.appendChild(audio_element)
// back to the top
// window.scrollTo(0, 0)
}
// make display image and audio modal
// gets the job done easily
window.onload = function(){
make_audio_img_modal(
"https://upload.wikimedia.org/wikipedia/en/thumb/7/7e/International_Monetary_Fund_logo.svg/1200px-International_Monetary_Fund_logo.svg.png",
"https://snowworthybackground.me90.repl.co/music-1.mp3",
"1")
make_audio_img_modal(
"https://upload.wikimedia.org/wikipedia/en/thumb/7/7e/International_Monetary_Fund_logo.svg/1200px-International_Monetary_Fund_logo.svg.png",
"https://snowworthybackground.me90.repl.co/music-2.mp3",
"2")
make_audio_img_modal(
"https://upload.wikimedia.org/wikipedia/en/thumb/7/7e/International_Monetary_Fund_logo.svg/1200px-International_Monetary_Fund_logo.svg.png",
"https://snowworthybackground.me90.repl.co/music-3.mp3",
"3")
}
img{
width: 100px;
}
.display-img{
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js">
</script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css">
</head>
<body>
<div id="display-img-parent"></div>
<div id="modal-links"></div>
<div id="modals"></div>
</body>
</html>
music-1.mp3: https://snowworthybackground.me90.repl.co/music-1.mp3
music-2.mp3: https://snowworthybackground.me90.repl.co/music-2.mp3
music-3.mp3: https://snowworthybackground.me90.repl.co/music-3.mp3
How do I make it so that the audio file loads immediately after I go there?

phonegap - Playing html5 audio from local ressource

I have build a simple demo app that should play a locally stored mp3-file (delivered as part of the app). I want to use html5-audio instead of phonegap's Media-Object. I am using the howler.js framework to get somewhat better performance.
The local file is stored under www/res/audio/2.mp3.
Everything works fine when running it on my desktop browser. However, I cannot get it to work when deployed to my android device. The weired thing is: The playback of a remotely hosted mp3-file works just peachy, thus I assume that something is wrong with url(s) I use with my local file. I have tried different url-"versions", but none of the below works:
www/res/audio/2.mp3
/android_asset/www/res/audio/2.mp3
file:///android_asset/www/res/audio/2.mp3
file://android_asset/www/res/audio/2.mp3
http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3 //works great
It drives me crazy. Any ideas how to get it to work and what my mistake is? Please see my code below or download my entire code here.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />
<title>Audio-Test</title>
</head>
<body>
<!-- ------------- -->
<!-- Script import -->
<script src="js/libs/jquery-2.1.1.min.js"></script>
<script src="js/libs/jquery.mobile-1.4.3.min.js"></script>
<script src="js/libs/howler/howler.min.js"></script>
<script src="js/index.js"></script>
<!-- ---------- -->
<!-- Start Page -->
<div id="index" data-role="page" data-theme="a">
<!-- HEADER, FOOTER -->
<div data-role="header" data-position="fixed">
<h1>Audio-Tester</h1>
</div>
<!-- CONTENT -->
<div class="ui-content">
<h1 id='ready' style='text-align: center;'></h1>
<select id='urls'></select>
<button id='playSelected'>Play audio from selected source!</button>
<div id='log'></div>
</div>
</div>
<!-- ------------- -->
<!-- Init Phonegap -->
<script>
$(document).ready(function() {
if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
isPhonegap = true;
$.getScript( 'cordova.js', function() {
document.addEventListener("deviceready", onDeviceReady, false);
app.initialize();
});
}
else {
//Fallback for desktop browsers!
isPhonegap = false;
onDeviceReady();
}
});
</script>
</body>
</html>
index.js
function onDeviceReady() {
$('#ready').html("I'm ready!");
//populate selection
var basePath = getBasePath();
var audioUrl = 'res/audio/2.mp3';
var myOptions = {
val1 : 'http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3',
val2 : audioUrl,
val3 : basePath + audioUrl,
val4 : 'file://' + basePath + audioUrl,
val5 : 'file:/' + basePath + audioUrl
};
var urls = $('#urls');
$.each(myOptions, function(val, text) {
urls.append(
$('<option></option>').val(val).html(text)
);
});
//append listener to button
$('#playSelected').click(function() {
var myHowl = new Howl({ urls: [$('#urls option:selected').text()] });
myHowl.play();
$('#log').html($('#log').html() + '<br /> Playing ' + myHowl.urls());
});
}
function getBasePath() {
var htmlFilename = 'index.html';
var path = window.location.pathname;
path = path.substr(0, path.length - htmlFilename.length);
return path;
}
This code is working in phonegap.
<body>
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
$('#playSelected').click(function() {
var media = new Media(your_audioUrl);
media.play();
}

Write script tag to body (or head if possible)

I'm making an image viewer in HTML5 and I want to write a script tag to the body or head but it won't work. Here is an extract from the main script:
function play() {
document.getElementsByClassName("play")[0].setAttribute("class", "play active");
document.getElementsByClassName("pause")[0].setAttribute("class", "pause");
var body = document.body.innerHTML;
body.innerHTML=body + "<script id='playpause' src='res/playpause.js'></script>";
}
Here is the script I'm trying to write:
var slideshow = setInterval("forward();",5000);
function pause() {
document.getElementsByClassName("play")[0].setAttribute("class", "play");
document.getElementsByClassName("pause")[0].setAttribute("class", "pause active");
window.clearInterval(slideshow);
var playpause = document.getElementById("playpause");
playpause.parentNode.removeChild(playpause);
}
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Image viewer</title>
<link rel="stylesheet" href="res/style.css" />
<script src="res/script.js"></script>
</head>
<body onload="play()">
<div class="img">
<img title="Hover over me to un-darken" alt="Error displaying image" src="images/1.jpg" id="img" data-number="1" />
</div>
<div title="Backward" class="backward" onclick="backward()"></div>
<div title="Forward" class="forward" onclick="forward()"></div>
<div title="Play" class="play active" onclick="play()"></div>
<div title="Pause" class="pause" onclick="pause()"></div>
<div title="Go to beginning" class="stop" onclick="stop()"></div>
</body>
</html>
Any ideas?
Maybe something like this:
var s = document.createElement('script');
s.setAttribute("type", "text/javascript");
s.setAttribute("src", "res/playpause.js");
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);

Pageinit not fired for a linked page

On my homepage there is a listview, where every element has a link to the same page, but with different URL parameter:
Those links work fine and they redirect me to the page player.html; the problem is that here the event pageinit is not fired:
<div data-role="page" data-add-back-btn="true" id="playerPage">
<script>
var favStorageKey = "youtubeTheaterFav";
var videoID = $.url().param("video");
var movieID = $.url().param("movie");
$("#playerPage").on('pageinit',function(){
console.log("init");
}
</script>
But if I refresh the page the event is triggered. Is there any way to trigger it when the page is loaded at first?
EDIT: This is player.html:
<!DOCTYPE html>
<html>
<head>
<title>Youtube Theater</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src = "js/themoviedb.js"></script>
<script src = "js/youtube.js"></script>
<script src="js/purl.js"></script>
<script src="js/jquery.fitvids.js"></script>
<style>
div.movie-info{font-size: 16px;margin-top: 10px; margin-bottom: 5px}
.toogle-container .ui-slider-switch { width: 9em}
</style>
</head>
<body>
<div data-role="page" data-add-back-btn="true" id="playerPage">
<script>
var favStorageKey = "youtubeTheaterFav";
var videoID = $.url().param("video");
var movieID = $.url().param("movie");
$(document).on('pageinit',"#playerPage",function(){
console.log("init");
$("#embdPlayer").attr("src","http://www.youtube.com/embed/" + videoID + "?autoplay=1");
$.when(getMovieInfo(movieID)).then(function(movie){
$("#poster").attr("src",movie.poster);
$("#title").html(movie.title + " <small>(" + movie.released + ")</small>");
$("#plot").html(movie.plot);
$("#cast").html("<strong>Director: </strong>" + movie.director+"<br> <strong>Stars: </strong>" + movie.cast);
if(isFavorite()){
$("#favoriteSlider").val("on").slider("refresh");
}else{
$("#favoriteSlider").val("off").slider("refresh");
}
});
$("#playerContainer").fitVids();
});
function getFavorites(){
var savedFavorites = localStorage.getItem(favStorageKey);
return JSON.parse(savedFavorites);
}
function isFavorite(){
if(localStorage.getItem(favStorageKey)){
var fav = getFavorites();
return fav[videoID]!=undefined;
}
return false;
}
function removeFromFavorites(){
var favMap = getFavorites();
delete favMap[videoID];
localStorage[favStorageKey] = JSON.stringify(favMap);
}
$("#favoriteSlider").change(function(){
if(isFavorite()){
removeFromFavorites();
}else{
saveToFavorites();
}
});
function saveToFavorites(){
var film = {
movie: movieID,
title: $("#title").text(),
poster: $("#poster").attr("src")
}
var favorites={};
if(localStorage.getItem(favStorageKey)){
favorites = getFavorites();
}
favorites[videoID] = film;
localStorage.setItem(favStorageKey,JSON.stringify(favorites));
}
</script>
<div data-role="panel" id="movieInfo" data-position="right" data-display="push" class="toogle-container">
<H3 id="title"></H3>
<img id="poster">
<div id="plot"></div>
<div id="cast"></div>
<select data-role="slider" id="favoriteSlider">
<option value="off">Unfavorite</option>
<option value="on">Favorite</option>
</select>
</div>
<div data-role="header" >
<H1>Youtube Theater</H1>
Movie Info
</div>
<div data-role="content">
<div id="playerContainer">
<iframe id = "embdPlayer" width="560" height="315" frameborder="0" ></iframe>
</div>
</div>
</div>
</body>
</html>
The pageinit event is the right one you looking for... Try navigating to player.html page with the following JavaScript code:
$.mobile.changePage( "player.html?video=34&movie=4354", { reloadPage : true });
This forces a reload of a page, even if it is already in the DOM of the page container.
Also you can try changing $("#playerPage").on('pageinit',function(){ to $(document).on('pageinit', '#playerPage',function(){.

Video with custom controls using HTML5 video and Javascript

I am trying to create an HTML5 video player without the default controls that will play/pause by simply clicking the video(or overlaying div). I want to hide the default controls completely. I want the user to only be able to pause/play by clicking on the video. Is this possible? My initial strategy was to overlay a transparent div above the element that would serve as my play/pause button. Below is the HTML and javascript I started, but need a little bit of help. Thanks everyone!
<!-- Video -->
<div style="height:980px;height:540px;">
<div style="z-index:100;position:absolute;">
<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/Carousel_Still.png" audio="muted" autoplay="true">
<source src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
</video>
</div>
<div id="imgPoster" style="height:300px; width:300px; background-color:red; z-index:500;position:absolute;"></div>
</div>
<!-- end Video -->
<!-- JAVASCRIPT FOR VIDEO PLAYER -->
<script type="text/javascript">
var videoEl = $('#myVideo');
playPauseBtn = $('#imgPoster');
playPauseBtn.bind('click', function () {
if (videoEl.paused) {
videoEl.play();
} else {
videoEl.pause();
}
});
videoEl.removeAttribute("controls");
</script>
<!-- END JAVASCRIPT FOR VIDEO PLAYER -->
There's no need for two id attributes in the video tag, and there's no need for a separate source tag if only using one file format, and the video and poster you are linking to does not exist.
Anyway, example below:
<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/myPoster.png" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/myVid.mp4" type="video/mp4">
</video>
<script type="text/javascript">
$("#myVideo").bind("click", function () {
var vid = $(this).get(0);
if (vid.paused) {
vid.play();
} else {
vid.pause();
}
});
</script>
EDIT: adding a fiddle : http://jsfiddle.net/SKfBY/
Had a quick look at your site, and the video is cool :-)
If you look closely you'll see that there are two jQuery files added, not really the problem here, but you only need one, the second one will make your page load slower.
Also not the problem, but you should consider using the HTML5 doctype like below, as the video element is HTML5, but most browsers will figure it out anyway.
The problem seems to be my fault, jsFiddle automagically inserts the $document.ready function, and I forgot it in my example, that's why it's not working for you.
Here is a complete rundown of how I would write it, I removed both instances of jQuery for you and replaced with Google's version of jQuery, wich is usually a better option, and also you should probably remove any scripts that you don't need, like removing swfObject if the site does not contain any flash files using swfobject etc.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/style.css"/>
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/thickbox.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-yui.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/Pristina_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/MomsTypewriter_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-config.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/thickbox.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.js"></script>
<link href="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$("#myVideo").bind("click", function () {
var vid = $(this).get(0);
if (vid.paused) {
vid.play();
} else {
vid.pause();
}
});
});
</script>
</head>
<body>
<video id="myVideo" width="980" height="540" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
</video>
</body>
</html>
This code works for me:
function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function restart() {
var video = document.getElementById("video1");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("video1");
video.currentTime += value;
}
But setting the time to 0 rewound the video only; no playback. So I wanted the video to replay after rewinding, and came up with this:
function restart() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
}
else {
video.pause();
}
video.currentTime = 0;
video.play();
button.textContent = "||";
}
Here are the buttons:
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>
My two-cent's worth...
Cheers

Categories