I am working on this site the home page slider has an option with label Watch the video I have added the below codes to my templates for the video to work.
<script>
function videoshow()
{
document.getElementById("sliders-container").style.display="none";
document.getElementById("show-video").style.display="block";
document.getElementById("show-video").innerHTML="<span id='close-button' onclick='closevideo()'>close</span><video id='example_video_1' class='video-js vjs-default-skin' controls width='100%' data-setup='{}' autoplay><source src='http://constantin-entertainment.info/king/wp-content/themes/Avada/video/sample11.mp4' type='video/mp4' /><source src='http://video-js.zencoder.com/oceans-clip.webm' type='video/webm' /><source src='http://video-js.zencoder.com/oceans-clip.ogv' type='video/ogg' /><track kind='captions' src='demo.captions.vtt' srclang='en' label='English'></track><!-- Tracks need an ending tag thanks to IE9 --><track kind='subtitles' src='demo.captions.vtt' srclang='en' label='English'></track><!-- Tracks need an ending tag thanks to IE9 --><p class='vjs-no-js'>To view this video please enable JavaScript, and consider upgrading to a web browser that <a href='http://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a></p> </video>";
}
function closevideo()
{
document.getElementById("show-video").style.display="none";
document.getElementById("show-video").innerHTML="";
document.getElementById("sliders-container").style.display="block";
}
</script>
and the below div for the video to show
<div id="show-video">
</div>
and called the below files also
<link href="<?php bloginfo('template_directory'); ?>/css/video-js.css" rel="stylesheet" type="text/css">
<script src="<?php bloginfo('template_directory'); ?>/js/video.js"></script>
the videos are playing firn in all browsers.Now I would like a box to hover out like "Contact Me" with a link to my contact form.so I searched over net and applied the following code
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
Conatct Me
};
</script>
but didnt help. Not sure where I have gone wrong.
i think your are writing wrong syntax.
code should be like that
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function () {
$('Conatct Me').appendTo('#example_video_1');
};
</script>
I would user JQuery for that, just download the js files and then include them in ur file with:
<script src="[path]"></script>
now you can do this:
<script>
window.onload = function(){
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
$('#contact').html('Conatct Me');
}
}
</script>
if this dont works pleas write the JS error as comment.
EDIT:
Totaly forgot about that you can also change the text in the DIV without any JQuery:
<script>
document.getElementById('contact').innerHTML = 'Conatct Me';
</script>
Related
I'm creating eLearning content in an application called MadCap Flare.
I'm trying to get the intro bumper video to play and then after the video is done it moves on to another page (we will say url for this forum).
Here is my code, and I cannot get this to work at all. The video plays but it will not move on to the url. When I view source code I see it put in a CDAT error.
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" style="mc-template-page:
url('..\Resources\TemplatePages\Home-Page.flmsp');">
<head>
</head>
<body>
<p>
<video MadCap:HTML5Video="true" MadCap:Param_controls="false" MadCap:Param_loop="false" MadCap:Param_muted="false" src="../Resources/Multimedia/Aruba_Coral.webm" MadCap:Param_autoplay="true">
</video>
<script type="text/javascript">
var video1 = document.getElementsByTagName('video1')[0];
video1.onended = function(e) {
window.location.replace('http://www.hpe.com');
}
</script>
</p>
</body>
</html>
You forgot to add the id attribute to the video tag. Try this :
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" style="mc-template-page:
url('..\Resources\TemplatePages\Home-Page.flmsp');">
<head>
</head>
<body>
<p>
<video id="video1" MadCap:HTML5Video="true" MadCap:Param_controls="false" MadCap:Param_loop="false" MadCap:Param_muted="false" src="../Resources/Multimedia/Aruba_Coral.webm" MadCap:Param_autoplay="true">
</video>
<script type="text/javascript">
var video1 = document.getElementById('video1');
video1.onended = function(e) {
window.location.replace('http://www.hpe.com');
}
</script>
</p>
</body>
</html>
I am trying to merge Two videos taken as input by the user and then display it and also provide a download link for the final video. My code doesn't merge the two videos but plays them one after the other. So how can I merge them together and provide a download link?
The following is my HTML code.
<!DOCTYPE html>
<html>
<head>
<title>Video Editor</title>
</head>
<body>
<h1 align="center">Video editor</h1>
<h3> Merging Videos</h3>
<video width="400" controls id="video">
<source src="" id="video_here" class="active">
Your browser does not support HTML5 video.
<source src="" id="newvideo_here" class="">
</video>
<br><br>
<input type="file" name="file[]" class="file_multi_video" id= "myvid" accept="video/*">
<br><br>
<input type="file" name="file[]new" class="new_file_multi_video" id= "newmyvid" accept="video/*">
<br>
<br>
<br>
<h3> Video Spliting</h3>
<button>video spliting</button>
<h3> add audio to video</h3>
<script type="text/javascript" src="assets/js/videoEditor.js"></script>
</body>
</html>
javascript code:-
var myvid = document.getElementById('myvid');
var video = document.getElementById('video');
myvid.addEventListener("change",function(){
var source = document.getElementById('video_here');
console.log(source);
source.src = URL.createObjectURL(this.files[0]);
video.load();
video.addEventListener('ended', function(e) {
// get the active source and the next video source.
// I set it so if there's no next, it loops to the first one
var activesource = document.querySelector("#video source.active");
var nextsource = document.querySelector("#video source.active + source") || document.querySelector("#myvideo source:first-child");
console.log("nextsource"+ nextsource);
// deactivate current source, and activate next one
activesource.className = "";
nextsource.className = "active";
// update the video source and play
video.src = nextsource.src;
video.play();
});
});
var myvid = document.getElementById('newmyvid');
//var video = document.getElementById('video');
myvid.addEventListener("change",function(){
var source = document.getElementById('newvideo_here');
console.log(source);
source.src = URL.createObjectURL(this.files[0]);
console.log(source.src)
//video.load();
});
I think you should mix the videos yourself using a technique like the one in this link: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_manipulation. It manipulates each pixel of each frame making it gray. Perhaps you could play the two videos simultaneously and mix the pixels together.
I don't know how to download the final generated video.
Ok so there is this amazing video player called plyr.io
I was so impressed by it and I downloaded it from Github and everything, I barely know code. I am early into the html and css. I know NOTHING about javascript. Anyways after downloading it and everything, I got to this point.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Plyr Demo</title>
<link rel='stylesheet' href='https://cdn.plyr.io/3.4.6/plyr.css'>
<style>
.container {
max-width: 800px;
margin: 0 auto;
}
.plyr {
border-radius: 4px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="container">
<video controls crossorigin playsinline
poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
HD.jpg" id="player">
<!-- Video files -->
<source
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
720p.mp4" type="video/mp4" size="720">
<!-- Caption files -->
<track kind="captions" label="English" srclang="en"
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
HD.en.vtt"
default>
<track kind="captions" label="Français" srclang="fr"
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
HD.fr.vtt">
<!-- Fallback for browsers that don't support the <video>
element -->
<a
href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
576p.mp4" download>Download</a>
</video>
<script src='https://cdn.plyr.io/3.4.6/plyr.js'></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
// This is the bare minimum JavaScript. You can opt to pass no arguments
to setup.
const player = new Plyr('#player');
// Expose
window.player = player;
// Bind event listener
function on(selector, type, callback) {
document.querySelector(selector).addEventListener(type, callback,
false);
}
// Play
on('.js-play', 'click', () => {
player.play();
});
// Pause
on('.js-pause', 'click', () => {
player.pause();
});
// Stop
on('.js-stop', 'click', () => {
player.stop();
});
// Rewind
on('.js-rewind', 'click', () => {
player.rewind();
});
// Forward
on('.js-forward', 'click', () => {
player.forward();
});
});
</script>
</body>
</html>
But when I actually try to replace
https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
720p.mp4
Whenever I replace it with a video link of my own, The video player just doesn't work, I have tried so many things and it just wouldn't work unless its the actual video of plyr.io
its free to use meaning the code doesn't violate copyright, tell me if i am wrong. the website link is (https://plyr.io/#video)
"Whenever I replace it with a video link of my own, The video player
just doesn't work, I have tried so many things..."
Keep your link as one line (eg: Don't break the file name with Enter to put some text on a new line. No new line after "Trailer-" text).
You cannot have empty spaces like (see grey area in below link's wording):
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
720p.mp4"
The correct link is:
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
So when you say (not working):
But when I actually try to replace:
https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-
720p.mp4
Correct way should be:
But IT WORKS when I actually try to replace:
https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4
The website that I am developing has banners, and when the site is viewed on mobile devices, the SWF banner doesn't show. In that case, I need to show an <img> tag, but the jQuery code doesn't work.
My template is something like this:
... (PHP + HTML code)
<script type=”text/javascript”>
if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera
Mini/i.test(navigator.userAgent)) {
</script>
... Show SWF banner
<script type=”text/javascript”>
}
else {
</script>
... Show GIF banner
<script type=”text/javascript”>
}
</script>
But it doesn't work. it shows up both of them instead.
You may need to do this:
Javascript/JQuery:
$(function() {
if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera
Mini/i.test(navigator.userAgent)) {
$("#img").show();
}else{
$("#swf_banner").show();
}
});
HTML:
<img id="img" src=".." style="display:none;"/>
<object id="swf_banner" width="400" height="50" data="bookmark.swf" style="display:none;"></object>
I made a website (not on air yet) and I tested it live with some free hosting.
The website contains a map tag and a big picture within it.
I made it so if someone clicks on a part of the picture a specific audio will be heard, according to where he clicked.
My problem is that there are a lot of audio tags (about 300) and because there are lots of bandwidth-hogging files, it takes about 10 minutes until the website is fully loaded which means most of the audios don't work for several minutes.
I want to know if there is a way, maybe a responsive way with javascript or PHP that will allow me to make those audio tags only if the user clicks on the map. That way it will not use that much bandwidth. Also if anyone can think of a better way it will greatly appreciated.
I'm adding the javascript for the click event so you can see what it is all about -
$('#Swensens_maze').click(function(){
$('audio').each(function(){
this.pause(); // Stop playing
// Reset time
});
$('#Swensens_maze_audio').get(0).play();
return false;
});
This is one example from many. The "#swensens_maze" is the area tag and the "#Swensens_maze_audio" is the audio tag for it.
Your problem happens because browser tries to preload the audio for each audio tag.
So the answer is to set the attribute preload in the audio tag to value none
<audio preload="none">
EDIT The audio now automatically strats
EDIT 2 I have just remembered that an empty src is a bad practice, I will find a solution, the best one is to store the information in some other tag and then create a the audio tag with js
EDIT 3
JS FIDDLE VERSION 2
Better version,doesn't leave an empty src attribute, all the audio information are stored inside the the hidden input, once you click the area the audio tag is provided through JS inside the clicked div.
<html>
<head>
<script src="jq.js"></script>
<style>
.map {width:100%;height:75px;background:#bbb}
.c1 {background:#f2f2f2}
.c2 {background:#000}
.c3 {background:#cc4444}
</style>
</head>
<body>
<div class='map c1'>
<input type='hidden' data-original='1.mp3' data-format="audio/mpeg" />
</div>
<div class='map c2'>
<input type='hidden' data-original='2.mp3' data-format="audio/mpeg" />
</div>
<div class='map c3'>
<input type='hidden' data-original='3.mp3' data-format="audio/mpeg" />
</div>
<script>
$('div.map').click(function () {
$('audio').each(function () {
this.pause();
});
//Check if audio is already present, if true, then exit
if($(this).find('audio').length > 0)
return;
var childInput = $(this).find('input:hidden'), //Find information
audioTag = document.createElement("AUDIO"),// Create AUDIO element
audioSource = document.createElement("SOURCE"), //Create SOURCE element
audioType = childInput.attr('data-format'),//retrieve audio type, then you could checkif the browser supports this format
audioSrc = childInput.attr('data-original'); //retrieve audio src
//Set type and src of the source
audioSource.type= audioType;
audioSource.src= audioSrc;
//Enable controls and append SOURCE to AUDIO
audioTag.controls = true;
audioTag.appendChild(audioSource);
this.appendChild(audioTag);// Append the created audio tag to the clicked div
audioTag.load();//Load the src
audioTag.play();//Play the audio
return false;
});
</script>
</body>
</html>
OLDER ANSWER
Bad for empty src
$('div.map').click(function () {
$('audio').each(function () {
this.pause();
});
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='') {
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
}
audioTag.get(0).play();
return false;
});
Full page FIDDLE DEMO(the player doesn't appear, because there isn't any audio file):
<html>
<head>
<script src="jq.js"></script>
<style>
.map {
width:100%;
height:75px;
background:#bbb
}
.c1 {
background:#f2f2f2
}
.c2 {
background:#000
}
.c3 {
background:#cc4444
}
</style>
</head>
<body>
<div class='map c1'>
<audio controls>
<source data-original='1.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c2'>
<audio controls>
<source data-original='2.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<div class='map c3'>
<audio controls>
<source data-original='3.mp3' src='' type="audio/mpeg" />
</audio>
</div>
<script>
$('div.map').click(function () {
$('audio').each(function () {
this.pause();
});
var audioTag = $(this).find('audio'),
sourceTag=audioTag.children('source');
if (sourceTag.attr('src')=='') {
sourceTag.attr('src', sourceTag.attr('data-original'));
audioTag.load()
}
audioTag.play();
return false;
});
</script>
</body>
</html>
<audio src="abc.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc1.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc2.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc3.mp3"controls class="audioDemo" preload="none"></audio>
<audio src="abc4.mp3"controls class="audioDemo" preload="none"></audio>
Yes don't leave the src attribute empty, but give to src a valid blank and short file.mp3.
Then when user click or whatever replace the src by the good file, like this:
document.getElementById("audio8").src = "song.mp3";
Also, depending of how is made your page, if audio's appear block after block, have a look to lazysize.js for smoothly load your content when scroolling. Easy to use and powerful.
https://github.com/aFarkas/lazysizes
Your browser tries to preload the audio for each audio tag. So the answer is to set the attribute preload in the audio tag to value none
use can use: <audio controls preload="none">