I found the solution; check edit 1 and 2 below
I've read many questions on this matter but most answers say "make sure you load the new video".
You can see my code below and I'm doing this.
What I'm trying to do in this example is have some kind of colored background (the "bg" div) and when its clicked I want to display a video on top. Ultimately what I want to achieve with this is have multiple images on the page and I want to overlay a video on top of everything according to the image tha was clicked. I'm still a noob in html and js so maybe I can't see the obvious.
Here's the code I use to create a red 500x500 background an load the test1.mp4 on top.
This works just fine.
<!DOCTYPE html>
<html>
<head>
<style>
#video{
z-index:1;
}
#bg {
position:absolute;
z-index:-1;
}
</style>
</head>
<body>
<div id="bg" style="background-color:#900;height:500px;width:500px;" ></div>
<div>
<video id="video" width="480" controls>
<source id="vidSrc" src="C:\Users\Biller\test videos\test1.mp4"; type="video/mp4">
Your browser does not support the video tag.
</video>
//the below script creates pause-play controls when I click on the video
<script>
var myVideo=document.getElementById("video");
myVideo.addEventListener('click',function(){
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
});
</script>
</div>
<script src="jquery-1.11.0.min.js"></script>
<script src="myJQuery.js"> </script>
</body>
</html>
then I use this jquery script (myJQuery.js) to change the video when the red bg is clicked:
$(document).ready(function() {
$("#bg").click(function(){
$("#vidSrc").attr("src","C:\Users\Biller\test videos\test2.mp4");
$("#video")[0].load();
});
});
When I click on the bg the video changes but the new video shows 0:00 on duration and the controls are not working. If I can get this to work I would then hide-unhide the video and change the src url accordingly. I'd appreciate some insight.
edit- I found the problem but I don't know why it's happening: If I put the video I want to change to (in this case 'test2.mp4') in the html directory it works just fine. But if it's anywhere else its not working. As if it cant recognize the path anymore. Any ideas why that may be?
edit2- Ok I found out it has something to do with the backward slash "\". When I replaced that with "/" in the file path, it worked. The "\" works fine when it's in the original html though (I mean when its directly in the video tag as src="C:\users...")
You can find solution here in this post states same issue as yours.
http://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag
good luck!
Related
I'm trying to replicate this: http://wistia.com/blog/fullscreen-video-homepage
on my site, but even working with just the base demo that they give, is running me into issues. If I simply download the sample from that page and open the video, it works fine, but if I do anything as seemingly simple as swapping the background video with the foreground video, it breaks, let alone replacing those videos with my own videos (which is my eventual goal with all of this).
Here's what I'm doing.
Replacing this in the javascript:
overlayVideo: 'fji9juvptr',
overlayVideoDiv: '#wistia_fji9juvptr',
backgroundvideo: 'z1ggfo8f86',
backgroundideoDiv: '#wistia_z1ggfo8f86'
with this:
overlayVideo: 'z1ggfo8f86',
overlayVideoDiv: '#wistia_z1ggfo8f86',
backgroundvideo: 'fji9juvptr',
backgroundideoDiv: '#wistia_fji9juvptr',
and replacing this in the HTML:
<div id="wistia_z1ggfo8f86" class="wistia_embed backgroundVideo" style="width:920px;height:518px;"></div>
<div id="wistia_fji9juvptr" class="wistia_embed overlayVideo" style="width:1920px;height:1080px;"></div>
with this:
<div id="wistia_fji9juvptr" class="wistia_embed backgroundVideo" style="width:920px;height:518px;"></div>
<div id="wistia_z1ggfo8f86" class="wistia_embed overlayVideo" style="width:1920px;height:1080px;"></div>
And that's enough to break it. My guess is that something about the two videos is different that causes the z1ggfo8f86 video to work as the background but not the fji9juvptr video, but I can't tell what that difference is.
I also tried just changing the names of the divs (I changed the "a" in "wistia" to an "o"), but that also broke it so I assume those div names are processed somehow by Wistia.
Any ideas on what I'm missing?
I never wanted an overlay video or buttons or any of that garbage - all I wanted was the background video - I simplified this code so it makes better sense - just change the wistiaVideoID in the javascript object and make sure the id="wistia_q4bmpyxfll" on the DIV in the HTML matches it which is important. Also change the settings for that wistia video on their website so there is no sound, autoplay, and loop...
<!doctype html>
<html lang="en">
<head>
<style>
body {
margin: 0;
padding: 0;
}
#video_container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
z-index: 1;
opacity: 1;
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="video_container">
<div id="wistia_q4bmpyxfll"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script charset='ISO-8859-1' src='https://fast.wistia.com/assets/external/E-v1.js'></script>
<script charset='ISO-8859-1' src='https://fast.wistia.com/labs/crop-fill/plugin.js'></script>
<script type="text/javascript">
var fullScreenVideo = {
wistiaVideoID: 'q4bmpyxfll',
embedVideo: function(){
var videoOptions = {};
Wistia.obj.merge(videoOptions, {plugin: {cropFill: {src: "//fast.wistia.com/labs/crop-fill/plugin.js"}}});
wistiaEmbed = Wistia.embed(this.wistiaVideoID, videoOptions);
},
fixTextPosition: function(){
var width = $(window).width();
var height = $(window).height();
$("#video_container").css("width", width).css("height", height);
}
};
$(document).ready(function() {
fullScreenVideo.fixTextPosition();
});
$(window).resize(fullScreenVideo.fixTextPosition);
fullScreenVideo.embedVideo();
</script>
</body>
</html>
Are your videos the same aspect ratio as the ones in the Tutorial?
To double check, in Wistia, follow these steps on the video content page where you found your video ID.
Video Actions > Embed & Share >
Choose any of the embed options and inspect the code for "height" and "" values, and update your style values for #backgroundVideo and #overlayVideo
I ended up figuring this out.
Of the two videos they use in the Tutorial, the Background one had configured (in Wistia) auto-play and loop, whereas the overlay video (for good reason) did not. Swapping them thus broke auto-play, and since the background video has no way to make it play, it'd just appear to not work at all (and the overlay video would auto-play when the page was loaded, so you'd hear it in the background despite no video being visible.
The solution is to either edit the video in Wistia's configuration properties to have the background one load and the foreground one not, or use the Embed API to set the settings in the JavaScript itself so you don't have to worry about what the video's default settings are.
How do I create a text hyperlink to an mp3 file without showing the player. For example, if I have the word "play" on my site and it is clicked, the associated mp3 will play without leaving the page and without a visible player. Also, when right clicked, the person has an option to save/download the file. The closest example I have found only allows you to copy the link location and not download/save the mp3 file. Thanks.
<!--[ In the head section of the HTML ]-->
<!--audio-->
<script type="text/javascript">
function play_single_sound() {
document.getElementById('audiotag').play();
}
</script>
<!--/audio-->
<!--[ In the body section of the HTML ]-->
<!--embedded audio-->
<div id="audio">
<audio id="audiotag" src="http://sample.mp3" autobuffer="autobuffer"></audio>
</div>
<!--/embedded audio-->
<!--button/link-->
play
<!--/button/link-->
<!--[ Optional CSS ]-->
div#audio {
display: none;
overflow: hidden;
}
Make the <a> tag point to the mp3 file. When you left-click, use JavaScript to play it. When you right-click, you'll get the built-in menu with a "save link" option.
play
Then in your JavaScript, you can prevent the default action of the link:
<script type="text/javascript">
document.getElementById('audiolink').addEventListener('click', function(e){
e.preventDefault();
document.getElementById('audiotag').play();
});
</script>
The best option would be to use something like SoundManager.
It has a flash fallback for browsers that do not support html5 audio tag.
Demo of normal mp3 pimped up links: play-mp3-links
My window.print() statements have been acting very strange and I finally narrowed it down to the videos in my html. I'll clarify strange, the print dialog only pops up after a page refresh or after an alert(which I find bizarre), and subsequent clicks on the print button result in inconsistent and flaky firing of the print dialog.
If I move the video files out of the expected dir so the html can't find them or remove the video tags the print functionality works perfectly. Currently the videos are sitting directly under the end of the jquery mobile content </div> tag, but I've tried moving them around in the page content with no change in behavior.
Has anyone encountered this problem or know how I might fix it?
EDIT: Tried grabbing the videos with jquery and calling .remove() on them to see if I could get it to fire properly on click but no go.
Maybe #media property will be helpful?
Example that works for me (please note styles applied):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#media print {
video { display: none; }
}
</style>
</head>
<body onload="window.print();">
<h1>Sample Text</h1>
<video width="320" height="240" controls>
<source src="example_video_file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p>To be printed out</p>
</body>
</html>
Calling this function as a workaround for this Chrome bug did the trick for me:
function printPage() {
window.print();
//workaround for Chrome bug - https://code.google.com/p/chromium/issues/detail?id=141633
if (window.stop) {
location.reload(); //triggering unload (e.g. reloading the page) makes the Print dialog appear
window.stop(); //immediately stop reloading
}
return false;
}
I'm using jQuery for/with javascript in order to try to modify the inner HTML code of a div in the .htm file. I'm using jQuery DOM ready event as recommended here (http://stackoverflow.com/questions/9856140/javascript-uncaught-typeerror-cannot-call-method-addeventlistener-of-null) in order to avoid the script to be run before the div is ready, but that doesn't matter; I keep getting that error.
I must say it's just a few days since I'm into Javascript and it is a very long time since I last used HTML so please don't discard any noob-typical errors because most likely it may be that.
Here are the files I'm using, hosted in Skydrive:
AMPlayer.htm
playlister.js
As it can be guessed, I'm using videoJS as video player. The CSS and JS files of videojs can be referenced either online (http://videojs.com/#section5) or offline, as can be seen in AMPlayer.htm, but this is just circumstancial information since it looks more like a problem with javascript rather than a problem with videojs.
EDIT: What I think is the important part of the files:
AMPlayer.htm (I think the problem is here, so I'm pasting the whole file):
<!DOCTYPE html>
<html>
<head>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video-js.js"></script>
<script src="jquery-1.7.2.min.js"></script>
<script src="playlister.js" type="text/javascript"></script>
<title>AMPlayer</title>
</head>
<body>
<div id="the-video" class="video-js-box">
<span> </span>
</div>
</body>
</html>
playlister.js:
function postVideo()
{
getNextVideo();
document.write("NEXT VIDEO: "+videoNames[iNewVideoId]+"<br>");
var video1 = '<video id="AMPlayer" class="video-js vjs-default-skin" preload="auto" width="650" height="365" data-setup="{}" autoplay> <source src="videos/AVANCE/vid.mp4" type="video/mp4" /><source src="videos/AVANCE/vid.webm" type="video/webm" /></video>';
//document.write(video1); This writes the text so the video is played, but it drives me to an undesired behaviour
document.write("BEFORE THE .SETUP<br>");
//$("#the-video").html(video1); This doesn't work
//document.getElementById("the-video").innerHTML=video1; This does neither work
//window.VideoJS.setup($'video1'));
document.write("AFTER THE .SETUP<br>");
document.getElementById("AMPlayer").addEventListener('ended', postVideo, true);
//$(".video-js")[0].player.play();
document.write("AFTER THE .PLAY<br>");
//postVideo();
}
Any provided help will be very useful for sure. Thanks in advance.
You are trying to get the element with the id AMPlayer, but you don't have one.
You have a string containing the HTML to create one, but it hasn't been added to the DOM.
I would like to copy images from a iframe into a textarea. The pages and the iframe are not on the same domain or server.
Any ideas on how to achieve this using javascript?
The iframe with images is using ajax to collect images.
Usage:
For example I would like to use this method to copy images from a iframe into the tinymce text-editor of wordpress. Eg. display a iframe with a image gallery under the text-editor, and when they click on the image in the iframe the image should display in the text-editor (the image is alredy uploaded).
Some ideas:
Drag and drop the images seams to work in IE and FF.
Rightclick, copy and past images seams to work in IE and C.
It would be nice if I could get the src of the image in a variable, to be able to add "class" and "alt".
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Copy images from iframe</title>
</head>
<body>
<textarea style="width:100%;height:400px" >I want to be able to get theme here like this
<img src="http://www.page.com/image.jpg" alt="">
</textarea>
<iframe width="100%" height="400px" src="http://www.page-with-images.com/"></iframe>
</body>
</html>
Try using jQuery.
Add a click event to $("iframe img"). In the click function, get the image's src and append that as an image tag to the tinyMCE editor.
This would look something like this:
$(function(){
$("iframe img").click(function(){
var update = $("<div>").append(
$("<img>").attr("src", $(this).attr("src"))
).html();
$("#content").val(function( i, v ) {
return v + update;
});
});
});
Example..
We're pretty much cloning the image, placing it in a temporary div, getting the pure HTML content of the div (so that we convert the image object to a usable string), and updating the textarea's value with it. Of course, in the demo I linked, #fake is the equivalent of an iframe in this case.