|
JavaScript - Autoplay And Autostop Videos Depending Where You Are
Hello,
I am trying to search some information about how to do a concept website like this: http://unfold.no/ Exactly what I want is something similar with vertical scroll but instead of images or the map I want that when you are going down the page you find a background video for example in the first area with an autoplay and if you are continue going down the video stops automatically. Not sure if there is any type of "control" when you can say: "When Video is on your screen auto-play and when dissapear from you screen stop. I am not sure if this is posible to do with Javascript or maybe with Flash. I have not found any example similar than this so not really sure if is a imposible fact. Thank you for your time Similar TutorialsI am new to javascript and am having trouble with what is probably very easy code. I have a video that I would like to have play on click. I was able to disable to autoplay but now I am stuck. Any help would be appreciated, Thanks! [CODE] <script type="text/javascript"> var flashvars = {}; var params = {}; params.wmode = "transparent"; params.play ="false"; var attributes = {}; swfobject.embedSWF("http://www.file.swf", "flashDiv", "450", "270", "9.0.0", "http://www.file.swf", flashvars, params, attributes); </script> On my music site, I want to keep track of the number of times each song has been played. The code below uses a clicked button to send the request. But I need to be able to send the request as each song begins to play. Or when a user clicks another song in the list. Mr Oldies online radio station I am using the audio.js script for the html5 audio player. That code is listed below as well. This code creates a division with the ID of "playing" for the active song. It is in here somewhere, where I would need to include the request to send the data to a php page which then does the work of accessing and updating a databse. I just do not know enough of Javascript to do this. Can someone show me where exactly to put the required code to do this? Thanks. Code: <!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>
audio.js code the other part of the audio.js script can be found here http://mroldies.net/test/audio.js Code: <script>
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>
Hello, I need help. Fast. I have enough HTML knowledge to get by but am miles away to be called an expert. I need to know how I can autoplay music with a click of a button. Its for a popular blogsite called Tumblr (oh c'mon I know you've heard of it). If possible, I hope that there won't be any pop-ups involved. Any and all help is greatly appreciated! (I think this is related to Javascript too ) Hello. I have a youtube video that autoplays everytime one opens the webpage containing the video. The only extra parameter that causes the video to autoplay is having the following added at the end of the embed src link: "&autoplay=1" If that is not present or if a zero is present in place of the 1, the video does not autoplay. I would like the video to play only once per session. If one is visiting the webpage a second time, the parameter above should not be present or the 1 should be a zero. I am modifying attempting to modify this code: http://www.javascriptkit.com/script/...2/postit.shtml and I am able to get differnt urls to print on screen depending if it's a first visit or not. Problem 1: I cannot however get this to work in Google Chrome. Problem 2: When I attempt to get the url to be printed inside the embed src [/B]link, which is inside the object tag, the javascript either gets printed or that portion is ignored. I don't know if this is because of the quotations and the way I am handling them or if because javascript cannot be inserted inside an object tag. Here is the code: Code: <html>
<body>
<br><br>
<script type="text/javascript">
//Post-it only once per browser session? (0=no, 1=yes)
//Specifying 0 will cause postit to display every time page is loaded
var once_per_browser=1
///No need to edit beyond here///
/* var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ns4)
crossobj=document.layers.postit
else if (ie4||ns6)
crossobj=ns6? document.getElementById("postit") : document.all.postit
function closeit(){
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
crossobj.visibility="hide"
} */
var url = "\"http://www.youtube.com/blah/version=3&hl=en_US&fs=1\"";
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function showornot(){
if (get_cookie('postdisplay')==''){
showit()
document.cookie="postdisplay=yes"
}
}
function showit(){
url = "\"http://www.youtube.com/blah/version=3&hl=en_US&fs=1&autoplay=1\"";
/*if (ie4||ns6)
crossobj.style.visibility="visible"
else if (ns4)
crossobj.visibility="show" */
}
if (once_per_browser)
showornot()
else
showit()
</script>
<b>Outside the Object Tag:</b> <br>
<script type="text/javascript">document.write(url);</script>
<br><br>
<b>In the Object Tag</b>
<br><br>
<object width="570" height="250"><param name="movie" value="http://www.youtube.com/blah?version=3&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src=<script type="text/javascript">document.write(url);</script> type="application/x-shockwave-flash" width="570" height="250" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</body>
</html>
Hi, I would like to embed 2 or 3 videos in sequence in my orkut profile using the tags <embed>. It is possible? Code: 1<embed src="http://www.youtube-nocookie.com/v/iuczE8vIujc&autoplay=1"loop="true"type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true" width="400" height="250"></embed>1 2<embed src="http://www.youtube-nocookie.com/v/UqqZm-D6WPo&autoplay=2" type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true" width="400" height="250"></embed>2 For playing automatically? Regards FG please i want to know how to Upload video file of any extention and it converts to .flv like U-Tube?
Hello everyone. I just came across a customer that wants me to place 1 video and 1 swf image player in the same place on there website. I tried this with a div layer where i put the video over the swf image but with a different monitor it would move. I did have a time out process of 2.1 mins. Does anyone know of any code that i could put in that would show the video for the time and when it finished it would show the swf images? If so can you tell me how to do this or help me with the code? If you need to see the current code it is simple just straight html done by a different coder. I would of done it with a css but he didn't want to. If you know of a way let me know. I have an HTML document with an <embed> tag in order to play a video. <code> <embed src="someMovie.mpeg" autostart="false"</embed> </code> I want to be able to click on an image that is also in the document, and play the video that is associated with that image with an onclick action. In other words I want to load a different video than "someMovie.mpeg". I tried simply setting the src and autostart attributes of the embed tag to the new movie and true, but this does not play the new video. Is there a way I can do this? Hi Java is becoming big. Can I ask what is the best resources to learn java besides lynda.com? Thanks. R hello Devs, i have a website that has lots of videos on it, the other day i saw a mouse over that showed a snippet of the youtube video, it had microsoft across the front it's since been deleted so i cannot show you an example, does anyone know where i can obtain this script please?
I want to be able to display an embedded video on a web page but i want the URL to be different based on the source IP visting the web page. Can this be done in javascript? Example: If someone from inside our network (one IP address on the outside) visits our external web page (hosted externally) visits a web page with one of the embedded videos the URL and code will serve up a locally hosted video. (WMV format) If someone outside our network (any other IP) visits our web site, they'll see embedded videos hosted on YouTube. Hello, glad to be here!! So I am curious about a simple script to play a main video, with thumbnails below. What I am wanting is when you click on a thumb, it plays in the main video spot. Hope this isn't much, but donations are allowed if it is. Hi guys.. I am just starting to learn JavaScript. I wanted to know how to have multiple hyperlinks (Containing links to Youtube Videos) that when clicked, cause the corresponding videos to play on the Youtube Player Embedded on the site. I hope my question is not too confusing. Thank you in advance! P.S. I saw some Source Code relating to this on StackOverflow and copied it and couldn't get it to work.. Here's my source code. Code: <html>
<head>
<title> Sample Page </title>
<script>
// Get element holding the video (embed or object)
var player = document.getElementById("MOVIE");
//Create a simple function and check if player exists
function play() {
if(player) {
player.playVideo();
}
}
</script>
</head>
<body>
<object width="420" height="315"><param name="MOVIE" value="http://www.youtube.com/v/HsQIoPyfQzM?version=3&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/HsQIoPyfQzM?version=3&hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
</br></br>
<a href="http://youtu.be/sPvqNMb4StI" onclick="play()"> THIS IS FIRST Video Link </a></br></br>
<a href="http://youtu.be/w7_Ccu21QVs" onclick="play()"> THIS IS SECOND Video Link </a>
</body>
</html>
Hi, I need a function to change an id depending on the webrowser. Code: <div id="main".... if the guy uses internet explorer the id of the main there as to be renamed mainie if he is with firefox the id of the main as to be renamed mainfff and if he uses opera the id of the main as to be ranamed mainop I really dont know how to do that, if someone could code that for me it would fix alot of problems. Thanks Im wanting to make a div move according to where the mouse is IE if the mouse is on the left the div moves right and visa versa. I've got the pixels for where the middle of the screen is but im unsure what to do next. If anyone can help ill be very grateful, ill try and find an example to help illustrate what i mean. Hello Everyone! It's been a while since this thought started to bother me, I would like to create a website that has script which depending on the option chooses the image and merges with the other image. My idea is that someone comes on my website which would be custom carp hair rings. They would have options such as: Hook type Hook size Braid(fishing line) Length of the braid Swivel So depending on the hook they choose different image will appear and depending on the braid and the hook size everything merges together into finished product where the outcome you could clearly see the image of the hook tied with braid and a swivel at the end. This is the image Basically where you see the hook, the customer could select from an option of hooks and it would be replaced by their option, the length of the bread doesn't matter, but it would be nice to have some sort of an indicator to the customer how long it would be, and the last bit is the swivel, depending on the option the customer chooses, he can see the swivel or not. Its like creating your own carp rig, you choose which hook you want, then it appears, you choose which braid you want, it appears and if you want you can have a swivel at the end and you can see how your chosen options looks like in reality. Now I do not ask anyone to do everything for me, all I'm asking is for directions. Is there a script somewhere that I could edit that would achieve my goal, since I have no coding skills but some knowledge it would be nice to get some support along the way. Thank You for you attention Arnoldas Valys Hi, I have the following code, but I wish to change the background image only twice in one day. So, let's say at 6 am the background changes to nanaimo-daytime.png and at 6 pm it changes to nanaimo-night.png - until 6 am when it starts all over again. I'd appreciate any help. Thanks so much, Abe <code> <script language="JavaScript"> function determineBackground() { var currentTime = new Date(); if (currentTime.getHours() < 8) { document.body.background = 'images/nanaimo-night.png'; } else if (currentTime.getHours() >= 18) { document.body.background = 'images/nanaimo-night.png'; } else { document.body.background = 'images/nanaimo-daytime.png'; } } </script> </code> Hi, i have a container div with many other nested divs inside e.g. Code: <div id="thisOne"> <div>Div 1</div> <div>Div 2</div> </div> The outter div is 640 (ish) px wide, and the div will scroll on the across horizontally. I want it to scroll left if the mouse is in the first 100px on the left (0-100px) or right if its in the last 100 px (540-640px). What would be the best way of doing this? Sorry if that didnt make sense :P I have recently installed google custom search on a page- using the iframe selection, so I can have control over the look of the page and it isn't a google branded page. The problem is- with JS disabled, this form doesn't work. However, the option to display results on a google hosted page does work. This is very important for accessibility for this site, so what I am wanting to do is have the basic search show ONLY if there is no JS enabled. But for everyone else- it displays as I intended. JS isn't my bread and butter, but I think it's the tool to use here. Could someone offer some guidance? Main Form Code: <div style="float:right">
<script type="text/javascript" src="/js/main.js"></script>
<div id="searchBox" class="searchBoxTopLevelNav">
<form name="search" id="search" action="search.php?">
<label for="q" style="display:none";>Site Search</label>
<input onclick="javascript:SearchClear(this);" onkeypress="javascript:OverrrideForms(this);" name="q" id="q" autocomplete="off" class="GoogleSearchTextBox" value="Search" />
<input name='btnG' onclick="javascript:SearchGoogle($(this).prev('input.GoogleSearchTextBox:first'));return false;" type='image' value='Search' src='../img/icons/search-gray.gif' alt='Go' align="top"/>
</form>
</div>
Form to display only if JS is not enabled Code: <form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="#" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
|
|||||||