I'm working on a media playback app that has two navigatable pages. I would like to store the video object so that if the user navigates away from the video page and then returns, the same object is loaded into the div and the user can simply pick up where they left off.
My problem: When the user returns to the video page, the video element reloads from scratch and I can't load it with the pre-existing video data. As a result, there is no video visible on the screen. My player controls, however, are tied to the original video object and continue to work as expected.
I'm new to these languages so any advice would be a great help. I can't figure it out for the life of me.
Here's the code. I initialize mediaSession and the flags in another script so they persist during page navigation.
The player page HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>homepage</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/mediacontent/mediacontent.css" rel="stylesheet" />
<!-- <script src="/js/appData.js"></script> -->
<script src="/pages/mediacontent/mediacontent.js"></script>
</head>
<body>
<div class="body_div">
<header id="header_titlearea">
<h1 class="win-type-ellipsis">
<img src="/images/logo.png" /><span> Decoder Sample App</span>
</h1>
</header>
<div id="article_maintext">
<video id="playbackVideo" height="100%" preload="auto">
<!--<video id="Video1" height="100%" preload="auto" >-->
<!--<source src="/media/demo.mp4" />-->
</video>
</div>
<footer id="footer">
<br />
<input type="range" class="s_Class" id="s_Seek" value="0"><br />
<button class="action secondary" id="b_playFromFile">File Picker</button>
<button class="action secondary" id="b_playbackPause">Play</button>
<button class="action secondary" id="b_playbackStop">Stop</button>
<button class="action secondary" id="b_playbackRewind">Rewind</button>
<button class="action secondary" id="b_playbackForward">Forward</button>
<button class="action secondary" id="b_playbackMute">Mute</button>
<button id="navButton" class="navButton" title="Nav" >About</button><br />
<p id="outputtext">debug monitor</p>
</footer>
</div>
</body>
</html>
The player page JS (excerpt):
(function f() {
"use strict";
WinJS.UI.Pages.define("/pages/mediacontent/mediacontent.html", {
ready: function(element, options) {
if (mediaSession.navflag === false) {
mediaSession.vid = WinJS.Utilities.query("#playbackVideo")[0];
mediaSession.vid.src = "/media/demo.mp4";
document.getElementById('outputtext').innerHTML = "new mediaSession set!"
} else if (mediaSession.navflag === true) {
if (mediaSession.pauseflag === false) {
//mediaSession.vid.play();
}
document.getElementById('outputtext').innerHTML = "existing mediaSession!"
*-Here is where I need help-*
mediaSession.navflag = false;
}
...
}
}
}
After a few false leads, I figured out how to swap out the reloaded video element with my video data, using the replaceChild() method.
the new javascript looks like this:
(function f() {
"use strict";
WinJS.UI.Pages.define("/pages/mediacontent/mediacontent.html", {
ready: function(element, options) {
if (mediaSession.navflag === false) {
mediaSession.vid = WinJS.Utilities.query("#playbackVideo")[0];
mediaSession.vid.src = "/media/demo.mp4";
document.getElementById('outputtext').innerHTML = "new mediaSession set!"
} else if (mediaSession.navflag === true) {
if (mediaSession.pauseflag === false) {
//mediaSession.vid.play();
}
document.getElementById('outputtext').innerHTML = "existing mediaSession!"
var mediaParent = document.getElementById("article_maintext");
mediaParent.replaceChild(mediaSession.vid, mediaParent.firstElementChild);
mediaSession.navflag = false;
}
...
}
}
}
Related
I've setup a play/pause video button in javascript, that was working, but now doesn't and I don't know why. It now only fires once, pausing but not playing.
Basically, the "if" part of my playButton function works correctly, but the "else" part doesn't seem to function correctly. It did previously, so I imagine there's just a missing element somewhere. I have even checked it in a code validator and it passes. What to do?
Please, see my code below...
window.onload = function() {
const video = document.getElementById('intro-video');
const playPause = document.getElementById('play-button');
const enlarge = document.getElementById('full-screen');
const progressBar = document.getElementById('progress-bar');
playPause.addEventListener('click', function playButton() {
if (video.play) {
video.pause()
playPause.innerHTML = 'Play Video'
playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Play.svg)'
} else {
video.play()
playPause.innerHTML = 'Pause Video'
playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Pause.svg)'
}
});
enlarge.addEventListener('click', function enlarge() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
progressBar.addEventListener('change', function progressBar() {
const time = video.duration * (progressBar.value / 100);
video.currentTime = time;
});
video.addEventListener('timeupdate', function progressTime() {
const value = (100 / video.duration) * video.currentTime;
progressBar.value = value;
});
progressBar.addEventListener('mousedown', function progressPause() {
video.pause();
});
progressBar.addEventListener('mouseup', function progressPlay() {
video.play();
});
};
<!doctype html>
<html lang='en-ZA'>
<head>
<meta charset='UTF-8'>
<title>Alcôve – Discover Opulence</title>
<link rel='dns-prefetch' href='//fonts.googleapis.com'>
<link rel='fonts' href='https://fonts.googleapis.com/css2?family=Work+Sans:wght#400;500;600;700&display=swap'>
<link rel='stylesheet' href='Style.css'>
<script rel='javascript' src='Controls.js'></script>
</head>
<body>
<div id='container'>
<div id='top' class='section dark'>
<div id='row1' class='row'>
<div id='main-menu'>
<ul>
<li><a href='https://alcove.bensmiles.com'>About Us</a></li>
<li><a href='https://alcove.bensmiles.com/committee'>Executive Committee</a></li>
<li><a href='https://alcove.bensmiles.com/news'>The Opulent News</a></li>
<li><a href='https://alcove.bensmiles.com/foundation'>Foundation</a></li>
<li><a href='https://alcove.bensmiles.com/contact'>Contact</a></li>
</ul>
</div>
<div class='column left'>
<div id='logo'>
<img src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Logo.svg'>
</div>
<div id='header-headline'>
<p>Alcôve Holdings</p>
<h1>Discover<br>Opulence</h1>
</div>
</div>
<div class='column right'>
<div id='menu-block'>
<img id='header-image' src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Header.png'>
<div id='header-copy'>
<p>Alcôve finds satisfaction in establishing an atmosphere where excellence is celebrated, and confidence is originated. We inspire the youth to lead with precision and passion by igniting their desire to discover opulence through Alcôve.</p>
</div>
<div id='video-console'>
<div id='video-player'>
<video autoplay muted id='intro-video'poster='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Poster.png' width='214px' height='120px'>
<source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.mp4' type='video/mp4'>
<source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.ogv' type='video/ogv'>
<source src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Video_Intro.webm' type='video/webm'>
</video>
<div id='video-details'>
<button id='full-screen' type='button'><img src='https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Enlarge.svg'></button>
<div id='video-headline'>
<p>Headline of the video playing</p>
</div>
</div>
</div>
<div id='video-controls'>
<button id='play-button' type='button'>Pause Video</button>
<input id='progress-bar' type='range' value='0'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
video.play references the play method of video. In Javascript, every non-null (non-zero, etc respectively) counts as true. Because the play method exists, it will never go to the else part. Instead, use if (!video.paused).
Just one more thing: decide whether to use semicolons or to not. If you use both styles, it makes the code a bit weird.
Try this:
playPause.addEventListener('click', function playButton() {
if (video.paused || video.ended) {
video.play()
playPause.innerHTML = 'Pause Video'
playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Pause.svg)'
} else {
video.pause()
playPause.innerHTML = 'Play Video'
playPause.style.backgroundImage = 'url(https://alcove.bensmiles.com/wp-content/uploads/Alcove-Icon_Play.svg)'
}
});
I am building a web tool for authors that follows a format we need for our backend. I didn't like a number of pre-made solutions for rich text editors as they were having way more features than I would need so I decided to parse my text through a function to detect bold using ** in the text.
I came across a regex solution here and when I used it, it detected the bold text and substituted * for <b> but displayed the tags instead of making the text between <b> and </b> bold.
I am new to HTML, CSS and JS so probably this is a simple error, but I couldn't find out how to deal with it myself...
// Tracks number of current textareas i.e. paragraphs
var element_counter = 0;
// Add Paragraph on button press
document.getElementById("addParagraph").addEventListener("click", function() {
var textarea = document.createElement("textarea");
var text = "Here goes your new paragraph.";
var node = document.createTextNode(text);
textarea.setAttribute("id", element_counter);
//textarea.setAttribute("class", "flow-text");
//textarea.setAttribute("oninput", "this.style.height = '';this.style.height = this.scrollHeight + 'px'");
textarea.append(node);
var section = document.getElementById("editor");
section.appendChild(textarea);
element_counter++;
reloadPreview();
});
// Add Image on button press
document.getElementById("addImage").addEventListener("click", function() {
var image = document.createElement("input");
image.setAttribute("type", "file");
image.setAttribute("id", element_counter);
image.setAttribute("accept", "image/*");
image.setAttribute("class", "file-field input-field");
var section = document.getElementById("editor");
section.appendChild(image);
element_counter++;
});
// Remove paragraph with confirmation step on button press
var confirm = false;
document.getElementById("removeLastItem").addEventListener("click", function() {
// Ensure there is an object to remove and wait for confirmation
if (document.getElementById(element_counter-1) != null) {
if (confirm === false) {
confirm = true;
document.getElementById("removeLastItem").innerHTML = "Confirm";
} else {
document.getElementById("removeLastItem").innerHTML = "Remove last item";
var element = document.getElementById(element_counter-1);
element.parentNode.removeChild(element);
confirm = false;
element_counter--;
reloadPreview();
}
}
});
// Remove all with confirmation step on button press
var confirmRemoveAll = false;
document.getElementById("removeAll").addEventListener("click", function() {
// Ensure there is an object to remove and wait for confirmation
if (document.getElementById(element_counter-1) != null) {
if (confirmRemoveAll === false) {
confirmRemoveAll = true;
document.getElementById("removeAll").innerHTML = "Confirm";
} else {
document.getElementById("removeAll").innerHTML = "Remove all";
var element = document.getElementById("editor").innerHTML = ""
confirmRemoveAll = false;
element_counter = 0;
reloadPreview();
}
}
});
// Preview on button press
document.getElementById("previewButton").addEventListener("click", reloadPreview);
// Preview current document status
function reloadPreview() {
// Clear previous preview
document.getElementById("preview").innerHTML = "";
// Add elements iteratively
var section = document.getElementById("preview");
const id = "preview";
for (var counter = 0; counter < element_counter; counter++) {
var type = document.getElementById(counter).nodeName;
// If text element
if (type === "TEXTAREA") {
var paragraph = document.createElement("p");
var text = document.getElementById(counter).value;
var richtext = boldText(text);
paragraph.setAttribute("id", id + counter);
paragraph.setAttribute("class", "flow-text");
paragraph.innerHTML = richtext;
section.appendChild(paragraph);
}
// If image element
if (type === "INPUT") {
// This weird structure allows to render item by item into preview and not mix up the order as onload is otherwise too slow
(function() {
var file = document.getElementById(counter).files[0];
var reader = new FileReader();
var image = document.createElement("img");
image.setAttribute("id", id + counter);
image.setAttribute("class", "materialboxed responsive-img");
section.appendChild(image);
reader.onload = function(e) {
image.setAttribute("src", e.target.result);
}
reader.readAsDataURL(file);
}())
}
}
}
function boldText(text){
var bold = /\*\*(\S(.*?\S)?)\*\*/gm;
var richtext = text.replace(bold, '<b>$1</b>');
return richtext;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Climate Science</title>
<!--Used to unify web page appearance and this preview appearance-->
<link type="text/css" href="/css/materialize.css" rel="stylesheet">
<link type="text/css" href="/css/styles.css" rel="stylesheet">
<link type="text/css" href="/css/mystyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=swap" rel="stylesheet">
<script href="text/javascript" src="/js/materialize.js"></script>
<link rel="manifest" href="/manifest.json">
<!-- IOS Support -->
<link rel="apple-touch-icon" href="/img/icons/icon-96x96.png">
<link rel="apple-touch-icon" href="/img/icons/icon-152x152.png">
<meta name="apple-mobile-web-app-status-bar" content="#5368ff">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#5368ff">
</head>
<body class="grey lighten-5">
<header>
<!-- top nav -->
<div class="navbar-fixed">
<nav class="z-depth-2">
<div class="nav-wrapper">
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Log out</li> <!--TODO needed?-->
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<h3>Editor Area</h3>
<p><b>Linebreaks</b> within paragraphs are currently <b>ignored</b> to follow our internal database format.</p> <!--TODO check if accurate, \n possible integratable?-->
<!--
<h6>Safety switch</h6>
<div id="safetyswitch" class="switch">
<label>
Off
<input type="checkbox">
<span class="lever"></span>
On
</label>
</div>
<p>You can only remove paragraphs while the switch is deactivated!</p>
<h6>Auto-preview</h6>
<div id="safetyswitch" class="switch">
<label>
Off
<input type="checkbox">
<span class="lever"></span>
On
</label>
</div>
<p>The preview will load automatically while you edit your text</p>
<br>
-->
<button id="addParagraph" class="waves-effect waves-light btn">Add new paragraph</button>
<button id="addImage" class="waves-effect waves-light btn">Add new image</button>
<button id="removeLastItem" class="waves-effect waves-light btn">Remove last item</button>
<button id="removeAll" class="waves-effect waves-light btn">Remove all</button>
<div id="editor">
<!-- Here go all the content the author creates-->
</div>
<button id="previewButton" class="waves-effect waves-light btn">Update Preview</button>
<h3>Preview</h3>
<div id="preview">
<!-- Here will be the preview elements when clicking the button -->
<!--
<form action="#">
<p class="flow-text">What changes do you think we're already experiencing? Tap as many that apply</p>
<p>
<label>
<input type="checkbox" />
<span>Raising Sea Levels</span>
</label>
</p>
<p>
<label>
<input type="checkbox" />
<span>Fewer Heat Waves</span>
</label>
</p>
<p>
<label>
<input type="checkbox" />
<span>Worse Droughts</span>
</label>
</p>
<p>
<label>
<input type="checkbox" />
<span>Hotter heat waves</span>
</label>
</p>
<button class="btn waves-effect waves-light btn-large" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</form>
-->
</div>
</div>
<script href="text/javascript" src="js/preview.js"></script>
<script href="text/javascript" src="js/ui.js"></script>
</body>
</html>
Hi so perhaps use innerHTML to insert HTML into the tag body? So instead of paragraph.append:
paragraph.innerHTML = richtext;
I am trying to make clone of live channel.
I get video of that specific time from database, load it in player. And seek the video player at played time with jquery and don't let the user seek video forward. After calculating deifference of video's current and ending time i set the page to reload itself after that time to load next video.
My code is working on firefox and internet explorer but not
on chrome.
Here it is HTML
<meta http-equiv="refresh" content="<?php echo $reload_sec; ?>" >
<link href="http://vjs.zencdn.net/5.8.0/video-js.css" rel="stylesheet"
>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<div class="main-content container">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<div align="center" class="embed-responsive embed-responsive-4by3">
<video id="my-video" class="video-js embed-responsive-item" controls preload="auto" width="840" height="264" data-setup="{}" autoplay="1">
<source src="<?php echo base_url('uploads/channelvideos/'.$file) ?>" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
</div>
<button onclick="setCurTime()" type="button" class="btn btn-info" style="margin-top:5px"><span class="fa fa-television"></span> Live</button>
</div>
<div class="col-sm-1">
<input type="text" name="seektime" id="seektime" value="<?php echo $seek_at; ?>" />
</div>
</div>
</div>
<script src="http://vjs.zencdn.net/5.8.0/video.js"></script>
Now Jquery
<script type="text/javascript">
function setCurTime()
{
location.reload();
}
var vid = document.getElementById("my-video");
vid.onloadedmetadata = function()
{
$(window).on("load", function()
{
var seektimej = $("#seektime").val();
if (document.getElementById("my-video"))
{
videojs("my-video").ready(function()
{
var myPlayer = this;
setTimeout(function()
{
//Set initial time to seeked time
myPlayer.currentTime(seektimej);
setTimeout(function()
{
var currentTime = 0;
myPlayer.on("seeking", function(event)
{
if (currentTime < myPlayer.currentTime())
{
myPlayer.currentTime(currentTime);
}
});
myPlayer.on("seeked", function(event)
{
if (currentTime < myPlayer.currentTime())
{
myPlayer.currentTime(currentTime);
}
});
setInterval(function()
{
if (!myPlayer.paused())
{
currentTime = myPlayer.currentTime();
}
}, 10);
}, 50);
}, 50);
});
}
});
};
</script>
.I do an example embled video: http://sachinchoolur.github.io/lightGallery/examples.html
and i have a problem with json! I can't load video when click image(div json) on website!!
But when I click image(div) slide video load complete and on this slide I can load all video(div and div json) !! Please help me when I click image(div json) video must be load.
this my code:
<script type="text/javascript">
$(document).ready(function () {
$.post("listvideojson.aspx", function (response) {
var listlinks = JSON.parse(response);
for (var i = 0; i < listlinks.length; i++) {
$("#video").append("<div data-src='" + listlinks[i].link + "'><img class='hinh' src='Images/149712_133340426820507_1784820870_n.jpg' /></div>");
}
});
});
</script>
<link href="CSS/lightGallery.css" rel="stylesheet" />
<script src="Scripts/lightGallery.js"></script>
This my html body:
<div id="video">
<div data-src="https://vimeo.com/110223381">
<img class="hinh" src="Images/10156016_399548070182677_8227239214459379074_n.jpg" />
</div>
<div data-src="https://vimeo.com/110223326">
<img class="hinh" src="Images/10156016_399548070182677_8227239214459379074_n.jpg" />
</div>
<div data-src="https://vimeo.com/110214790">
<img class="hinh" src="Images/10156016_399548070182677_8227239214459379074_n.jpg" />
</div>
<div data-src="https://vimeo.com/110214789">
<img class="hinh" src="Images/10156016_399548070182677_8227239214459379074_n.jpg" />
</div>
</div>
I am trying to link 35 webpages with math.random. However I dont want it to go to each site more then once. So I have this:
function myFunction() {
var pages = ['sang1.html', 'sang2.html', 'sang3.html', 'sang4.html', 'sang5.html', 'sang6.html', 'sang7.html', 'sang8.html', 'sang9.html', 'sang10.html', 'sang11.html', 'sang12.html', 'sang13.html', 'sang14.html', 'sang15.html', 'sang17.html', 'sang18.html', 'sang19.html', 'sang20.html', 'sang21.html'];
var page, visitedPages = JSON.parse(localStorage.getItem("visitedPages"));
if (visitedPages === null) {
visitedPages = [];
}
if (pages.length !== visitedPages.length) {
for (var i = 0; i < pages.length; i++) {
page = pages[Math.floor((Math.random() * pages.length) + 1)];
if (visitedPages.indexOf(page) === -1) { //unvisited yet
localStorage.setItem("visitedPages", JSON.stringify(visitedPages.push(page)));
window.location.href = page;
break;
}
}
} else {window.location.href = score.html //All pages visited at once
}
}
a random page:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Gæt en sang</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="Test.js"></script>
</head>
<body>
<audio class="hidden" controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="Original GhostBusters Theme Song.mp3" type="audio/mpeg">
</audio>
<div id="header">
<h2> Gæt sangen og hejs flagstangen!</h2>
</div>
<div id="left">
<ul> Hvilken sang er dette?
</br>
<button type="button" onclick="myFunction()">
<li> Ghost busters</li>
</button>
</br>
<button type="button" onclick="myFunction()">
<li> Poltergeist</li>
</button>
</br>
<button type="button" onclick="myFunction()">
<li> Something strange<li>
</button>
</br>
<button type="button" onclick="myFunction()">
<li> Who are you gonna call<li>
</button>
</ul>
</div>
</div>
<p id="Test"></p>
</body>
</html>
so I have a button you press and then it starts myfunction. This goes for all my sites. However when i press my button it always goes to page 2. And only from page 1. Any suggestions to what is wrong?
Instead of having a list of visited pages, have a list of all pages which you splice a random one out of on every click. An example without the finishing page:
var pages = JSON.parse(localStorage.getItem("pages"));
if (pages === null) {
pages = ['sang1.html', 'sang2.html', 'sang3.html', 'sang4.html', 'sang5.html', 'sang6.html', 'sang7.html', 'sang8.html', 'sang9.html', 'sang10.html', 'sang11.html', 'sang12.html', 'sang13.html', 'sang14.html', 'sang15.html', 'sang17.html', 'sang18.html', 'sang19.html', 'sang20.html', 'sang21.html'];
}
function onClick () {
var randomIdx = Math.floor(Math.random() * pages.length),
page = pages[randomIdx];
pages.splice(randomIdx, 0);
localStorage.setItem("pages", JSON.stringify(pages));
window.location.href = page;
}