I am having a hard executing a chunk of HTML code inside my JavaScript logic, i was wondering if someone could point out what i am doing wrong? What i am trying to achieve is run either video based on probability. Here is my code:
<html>
<head>.</head>
<body>
<script>
function myFunction() {
var chance = (( Math.random()*100)+1)
if (chance>= 0 || chance<=50){
<video controls autoplay name="media">
<source src="http://webmup.com/195a3/vid.webm" type="video/webm">
</video>
}
else {
<video controls autoplay name="media">
<iframe width="420" height="315"
<source src="https://www.youtube.com/embed/IdtKbq3Omkw" type="video/webm">
</ifrmae>
</video>
}
}
</script>
</body>
</html>
As the comments state.. That is not how you should go about.. You can try this though, perhaps it will get you an idea on how to work with javascript in combination with html:
<html>
<head>
</head>
<body>
<div id="container"></div>
<script>
var container = document.getElementById('container');
function myFunction() {
var chance = (( Math.random()*100)+1)
if (chance>= 0 || chance<=50){
container.innerHTML = '<video controls autoplay name="media"><source src="http://webmup.com/195a3/vid.webm" type="video/webm"></video>';
}
else {
container.innerHTML = '<video controls autoplay name="media"><iframe width="420" height="315"><source src="https://www.youtube.com/embed/IdtKbq3Omkw" type="video/webm"></iframe></video>';
}
}
</script>
</body>
</html>
html tags such as <video> should be put outside of a JavaScript function and inside the html's <body> tag.
First, you want to query your video element with getElementById. In both scenarios, we are creating a source element, so we can declare that outside of the conditional block.
We can set attributes such as src and type with the setAttribute function. We can then add the source element as a child to the video element with the appendChild function.
<body>
<video id="my-video" controls autoplay name="media">
</video>
</body>
function myFunction() {
var video = document.getElementById("my-video");
var source = document.CreateElement("source");
source.setAttribute("type", "video/webm");
var chance = (( Math.random()*100)+1)
if (chance >= 0 || chance <= 50) {
source.setAttribute("src", "http://webmup.com/195a3/vid.webm");
video.appendChild(source);
} else {
var iframe = document.createElement("iframe");
iframe.setAttribute("width", "420");
iframe.setAttribute("height", "315");
video.appendChild("iframe");
source.setAttribute("src", "https://www.youtube.com/embed/IdtKbq30mkw");
iframe.appendChild(source");
}
}
Since you didn't tag this with jQuery, I'll assume you aren't looking to use it. You can still use "templates" though, even without it:
Put each template in a script tag with type="text/template":
<script id="withIframe" type="text/template">
<p>With Iframe</p>
<video controls autoplay name="media">
<iframe width="420" height="315" <source src="https://www.youtube.com/embed/IdtKbq3Omkw" type="video/webm">
</iframe>
</video>
</script>
<script id="withoutIframe" type="text/template">
<p>Without Iframe</p>
<video controls autoplay name="media">
<source src="http://webmup.com/195a3/vid.webm" type="video/webm">
</video>
</script>
<div id="holder">
</div>
Then in your javascript load the correct one based on your logic:
var iframe = document.getElementById("withIframe").innerHTML;
var noiframe = document.getElementById("withoutIframe").innerHTML;
function myFunction() {
var chance = ((Math.random() * 100) + 1);
var output = '';
if (chance <= 50) {
output = noiframe;
} else {
output = iframe;
}
document.getElementById("holder").innerHTML = output;
}
myFunction();
Note, there were some typos in your HTML and you condition would always return true:
chance>= 0 || chance<=50
All positive numbers are greater than 0 or less than 50.
Here is a working fiddle: https://jsfiddle.net/mcgraphix/5cr4j1r7/
For more complex templates where you can pass data in to populate your template, you may want to look at Mustache or Handlebars.
You can't do that.
But you can use templates.
Both w/wo jQuery
function jq(){ return $('#useJquery').prop('checked') }
function replace(){ return $('#replace').prop('checked') }
$(function(){ $('#button').click(function(){run();}) })
function run(){
if (jq()) {
if (replace()) {$("#container").html('');}
$("#container").append($((Math.round(Math.random()) ? $("#template1") : $("#template2")).html()));
} else {
if (replace()){document.getElementById("container").innerHTML = ''}
document.getElementById("container").innerHTML += document.getElementById( (Math.round(Math.random()) ? "template1" : "template2")).innerHTML;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="useJquery"> Use jQuery ?
<input type="checkbox" id="replace"> Replace ?
<input type="button" id="button" value="Randomize!"/>
<script type="text/template" id="template1"><div>I chose : VIDEO 1</div></script>
<script type="text/template" id="template2"><div>I chose : VIDEO 2</div></script>
<div id="container"></div>
Related
How can I test against an invalid .mp4 format file in order to hide the corresponding container?
<div id="video">
<video controls width="320" height="240">
<source src="<?php echo $row["username"]);?>" type="video/mp4">
</video>
</div>
Here is my attempt:
<script>
document._video = document.getElementById("video");
document._video.addEventListener('error',function(){
video.style.display = "none";
});
</script>
why not work? because you addeventlistener to div not the source of video tag
<div id="video">
<video controls="controls" width="320" height="240">
<source src="aaaa" type="video/mp4"/>
</video>
</div>
<script>
var v = document.querySelector('#video');
var sources = v.querySelectorAll('source');
if (sources.length !== 0) {
var lastSource = sources[sources.length-1];
lastSource.addEventListener('error', function() {
v.style.display="none";
});
}
</script>
You can use canPlayType():
The possible return values are:
probably: The specified media type appears to be playable.
maybe: Cannot tell if the media type is playable without playing it.
'' (empty string): The specified media type definitely cannot be played.
If, instead you need the onerror in order to get
....These events occur when some form of error occurs while attempting to load or perform the media.
your code must be changed to:
$('#video source').on('error',function(e) {
The snippet:
var result = $('#video video').get(0).canPlayType($('#video video source').attr('type'));
console.log('The first video can be played: ' + result);
$('#video source').on('error',function(e) {
//
// this in order to dectect wrong sources
//
$('#video').toggle();
console.log('The first video source has errors...');
});
$('#newvideo source').on('error',function(e) {
//
// this in order to dectect wrong sources
//
$('#newvideo').toggle();
console.log('The second video source has errors...');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video">
<p>The first video: it's ok</p>
<video controls width="320" height="240">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</div>
<!-- This second video has an invalid source -->
<div id="newvideo">
<p>The second video: it has an invalid source</p>
<video controls width="320" height="240">
<source src="aaaaaa" type="video/mp4">
</video>
</div>
Is it possible to set a video to full screen on page load?
So far, the only answer I could get to work and was actually logical to me was setting the width and height on the element via CSS.
var $pop = Popcorn("#video");
$pop.play();
console.dir( $pop )
html{font-family:arial;}
#video{width:100%;height:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="video" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
I use Popcorn.js for playing the video on startup.
I am aware of setting CSS classes from JavaScript. The thing I'm more interested in would be the question: is there is a JavaScript based method to call, to maximize the video to full screen (on startup).
Using JavaScript, as suggested by Will, I also can't seem to get it to work properly
var video = $("#video");
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
html{font-family:arial;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="video" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
HTML:
<div class="source" id="source_one" onclick="chnageToSourceTwo()">
Source 1
</div>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="360" poster="" data-setup="{}">
<source src="example_video_1.mp4" type='video/mp4' />
</video>
Script:
function chnageToSourceTwo() {
document.getElementById("example_video_1").src="example_video_2.mp4";
}
The video source is not changing after clicking on div. I am using the Video.js plugin to add video player to my webpage.
Does anyone know how to change source of video onclick?
jsFiddle http://jsfiddle.net/ah1fj7te/
It would be easier is to give your <source> object an ID. and reference the object by the ID using document.getElementById and document.addEventListener
Change your HTML:
<div class="source" id="source_one">Source 1</div>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="360" poster="" data-setup="{}">
<source id="source_video" src="example_video_1.mp4" type='video/mp4' />
</video>
<script>
document.getElementById('source_one').addEventListener('click', function() {
document.getElementById('source_video').src = 'example_video_2.mp4';
});
</script>
Change this line:
document.getElementById("example_video_1").src="example_video_2.mp4";
With this:
document.getElementById("example_video_1").getElementsByTagName('source')[0].src="example_video_2.mp4";
I noticed you tagged this as jQuery, so here is how you would implement this in jQuery.
$("#example_video_1 source").attr("src", "example_video_2.mp4");
Here is a DEMO
And here some code:
var a = document.getElementById('source_one');
a.addEventListener('click',function() {
document.getElementById("example_video_1").children[0].src="example_video_2.mp4";
a.innerHTML = 'Source 2';
alert(document.getElementById('example_video_1').children[0].src); // just to show that it is changed...
});
If you want to be able to toggle both videos, use this:
DEMO
var a = document.getElementById('source_one');
var b = document.getElementById("example_video_1");
a.addEventListener('click',function() {
if (document.getElementById("example_video_1").children[0].src == 'http://fiddle.jshell.net/_display/example_video_2.mp4') // replace with real url
{
document.getElementById("example_video_1").children[0].src="example_video_1.mp4";
a.innerHTML = 'Source 1';
}
else {
document.getElementById("example_video_1").children[0].src="example_video_2.mp4";
a.innerHTML = 'Source 2';
}
});
I'm using html5 video player to play some videos and trying to use external controls with javascript. manage to get the player play and pause. but i cannot get it to mute and unmute using the buttons. if someone can help with this matter its highly appropriated.
Here is the HTML code
<video id="myMovie" width="600" height="600" loop preload="auto" video poster="img.jpg" controls>
<source src="my-video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="playButton">Play</button>
<button id="volButton">Mute</button>
JavaScript Code
function playMymovie() {
var element = document.getElementById('myMovie');
var element = document.getElementById('pbutton');
playButton.addEventListener('click', PlayOrPause, false);
volButton.addEventListener('click', VolMute, false);
}
function PlayOrPause() {
if(!myMovie.paused && !myMovie.ended) {
myMovie.pause();
}else{
myMovie.play()
}
}
function VolMute(){
if(!myMovie.muted){
myMovie.muted(true);
}else{
myMovie.muted(false);
}
}
Thanks in advance.
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="muteUnMute()">Mute/UnMute</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function muteUnMute()
{
if( !myVideo.muted)
myVideo.muted='muted';
else
myVideo.muted=false;
}
</script>
</body>
</html>
Try this:
var videoObject = document.getElementById('myMovie');
videoObject.muted = !videoObject.muted;
I'm playing an MP3 using the <audio> tag in HTML5.
<audio controls="controls" autoplay="autoplay">
<source src="song.mp3" type="audio/mp3" />
</audio>
This works fine, but I am wondering how I can put a delay in before the song starts to autoplay? I know there's not a delay attribute, but I'm thinking it could be accomplished via javascript?
Try this, really simple but you should move the JS outside the markup...
<audio controls="controls" onloadeddata="var audioPlayer = this; setTimeout(function() { audioPlayer.play(); }, 8000)">
<source src="Kalimba.mp3" type="audio/mp3" />
</audio>
Javascript only method:
var sound = document.createElement('audio')
sound.id = 'audio'
sound.controls = 'controls'
sound.src = 'http://a.tumblr.com/tumblr_leltkjNwWL1qf32t9o1.mp3'
sound.type = 'audio/mp3'
document.body.appendChild(sound)
function playAudio() {
document.getElementById('audio').play();
}
setTimeout("playAudio()", 3000);
Try this:
HTML:
<div id='audio'>This will be replaced with an audio tag</div>
jQuery:
$(document).ready(function (){
$("#audio").stop("true").delay('2000').queue(function() {
$(this).html('<audio controls="controls" autoplay="autoplay"><source src="song.mp3" type="audio/mp3" /></audio>');
});
});
All together would be:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<div id='audio'>This will be replaced with an audio tag</div>
<script type='text/javascript'>
$(document).ready(function (){
$("#audio").stop("true").delay('2000').queue(function() {
$(this).html('<audio controls="controls" autoplay="autoplay"><source src="song.mp3" type="audio/mp3" /></audio>');
});
});
</script>
</body>
</html>
You can use .delay() to delay a process in jQuery.
The time is in milliseconds, so 2000 = 2 seconds.