I am trying to play a video in IE9 and earlier versions. For that I used activeX plugin to load VLC Media Player (that is my basic requirement).
When I tried to execute my code I got an error thrown:
Unable to get value of the property 'playlist': object is null or undefined
My code as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>VLC API</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(document).ready(function(){
play();
displayPlugins();
$(function(){
$("#vlc").css({ "width": "400px", "height": "300px" });
});
});
function play()
{
var vlc=document.getElementById("vlc");
alert("play video");
var url="rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov";
var options=new Array(":aspect-ratio=4:3","-rtsp-tcp");
var id= vlc.playlist.add(url,"",options);
vlc.playlist.playItem(id);
}
function displayPlugins()
{
alert("plugins");
var player="<object type='application/x-vlc-plugin' id='vlc' width='300' height='225' classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' codebase='http://activex.microsoft.com/controls/vb5/comdlg32.cab'></object>";
$("#video_holder").html(player);
}
</script>
</head>
<body>
<div id="video_holder" style="border:1px solid #00FF33; height:350px;"></div>
</body>
Can anybody help me where I'm getting wrong?
You are doing:
var vlc=document.getElementById("vlc");
But on HTML, you have
<div id="video_holder" style="border:1px solid #00FF33; height:350px;"></div>
So in theory you want:
var vlc=document.getElementById("video_holder");
You might have more problems after that, but start here.
Related
I am developing a jquery plugin and the problem I have is that when trying to pass settings, works with two of the three options I try to set. When I want to pass the "fadeIn" effect does not display me anything and stops working. This is my code:
// JavaScript Document
jQuery.fn.slider = function(opciones) {
var configuracion = {
efecto: "fadeIn",
velocidadEfecto: 1000,
tiempoPausa: 3000
}
jQuery.extend(configuracion, opciones);
this.each(function() {
elem = $(this);
elem.find('div:gt(0)').hide();
//$('#imagenes div:gt(0)').hide();
setInterval(function() {
elem.find('div:first-child').fadeOut(0)
.next('div')[configuracion.efecto](configuracion.velocidadEfecto)
.end().appendTo('#imagenes');
}, configuracion.tiempoPausa);
});
return this;
};
#imagenes {
width: 200px;
height: 200px;
border: 1px solid grey;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
$(document).ready(function() {
$("#imagenes").slider({
efecto: "slideUp",
velocidadEfecto: 2000,
tiempoPausa: 4000
})
});
</script>
</head>
<body>
<h2>Slider</h2>
<div id="imagenes">
<div>
<img src="http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg" id="foto1" />
</div>
<div>
<img src="http://davidnaylor.org/temp/firefox-logo-200x200.png" id="foto2" />
</div>
<div>
<img src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" id="foto3" />
</div>
</div>
</body>
</html>
I don't understand why "slideUp" effect not working. Thank you!
Regards! :-)
You can reference methods and attributes via string names, like "fadeIn" in your example, but you have to use bracket [] notation, not dot .
setInterval(function() {
elem.find('div:first-child').fadeOut(0)
.next('div')[configuracion.efecto](configuracion.velocidadEfecto)
.end().appendTo('#imagenes');
}, configuracion.tiempoPausa);
If you don't use brackets, Javascript is going to look for a configuracion property on the next('div') object, with an efecto method attached to it (which isn't the case). Using brackets works out to .next('div')['fadeIn'](configuracion.velocidadEfecto) because configuracion.efecto is evaluated to its string value.
Hope this helps.
I have a JavaScript in HTML file that call a php file in a $.get jquery API. When I run the HTML file on my computer where WAMP is running (for php), I can't get the result of php function on the screen,neither the text of h1 tag nor the the output of print function. Thanks for a lot your answer.
Regards
Here is my html file AJAXTest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=iso-8859-1" />
<script type = "text/javascript"
src = "jquery-1.3.2.min.js">
</script>
<script type = "text/javascript">
$(init);
function init(){
alert("init passage 2" + " Andy");
$.get("http://localhost/greetUser.php", { "userName": "Andy" }, processResult);
alert("processresult passage" + data);
$("#output").html(data);
}
function processResult(data, textStatus){
alert("processresult passage" + data);
$("#output").html(data);
}
</script>
<title>AJAXTest.html</title>
</head>
<body>
<h1>Test AJAX</h1>
<div id = "output">
C’est la sortie par défaut
</div>
</body>
</html>
and here is my php file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=iso-8859-1" />
<title>greetUser.php</title>
</head>
<body>
<div>
<h1>Réponse</h1>
<?php
$userName = $_REQUEST["userName"];
print "<p>Salut, $userName!</p> ";
?>
</div>
</body>
</html>
It looks like everything should largely be working, but one thing that I can see that would break it, is that you have the
alert("processresult passage" + data);
$("#output").html(data);
being called inside of the init() function, directly after the $.get call.
At this point in the execution, the 'data' variable does not exist and using it will cause an error and halt all javascript from continuing, as the execution has to wait until the request is returned to be able to process it (in the processResult function, which you appear to be handling correctly)
Removing those lines, I think should solve your problem.
Try this:
<script type = "text/javascript">
init();
function init(){
$.post("http://localhost/greetUser.php", { "username": "Andy" }, function(data,textStatus){
$("#output").html(data);
});
}
</script>
UPDATE
I don't understand the downvote, but if you try this, it works:
<script type = "text/javascript">
init();
function init(){
$.post("http://localhost/file.php", { "username": "Andy" }, function(data,textStatus){
$("#output").html(data);
});
}
</script>
<title>AJAXTest.html</title>
</head>
<body>
<h1>Test AJAX</h1>
<div id = "output">
C’est la sortie par défaut
</div>
</body>
</html>
PHP file:
<?php
$userName = $_POST["username"];
print "<p>Salut, $userName!</p> ";
?>
Am using the following javascript programm for convert pdf file to binary file .It will work properly in FireFox.but in IE it will display the "0 is null or not an object javascript" .how to solve this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
$('#document_upload').change(function()
{
var fileList = this.files;
var file = fileList[0];
create_blob(file,function(blob_string)
{
replace_binary_data=blob_string;
$("#document_binary").val(replace_binary_data);
});
});
function create_blob(file, callback)
{
var reader = new FileReader();
reader.onload = function()
{
callback(reader.result)
};
reader.readAsDataURL(file);
}
});
</script>
<body>
<input type="text" id="document_binary" value=""/>
<div id="upload_document">
<input type="file" name="document" id="document_upload"/>
</div>
</body>
</html>
I'm pretty sure IE does not support FileReader (so you cannot instantiate it for obvious reasons).
See http://caniuse.com/filereader - it is not available until IE10.
I am trying to rotate some images. Works great except I get a strange "flicker" on some of the transitions. Any suggestions what I am doing wrong? Thank you
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
#test img {position: absolute;right: 0;top: 0;}
#test img:last-child {display: none;}
</style>
<script>
function rotateImage()
{
var $images=$('#test img');
$images.eq(1).attr({src : files[index]});
$images.eq(0).fadeOut(1000);
$images.eq(1).fadeIn(1000, function()
{
$images.eq(0).attr('src', files[index]);
$images.eq(0).show();
$images.eq(1).hide();
if (index == files.length-1){index = 0;}else{index++;}
});
}
var index=1,files=['f1.jpg','f2.jpg','f3.jpg'];
setInterval(rotateImage, 2000);
</script>
</head>
<body>
<div id="test"><img src="f1.jpg" alt="" /><img src="f1.jpg" alt="f1.jpg" /></div>
</body>
</html>
Flickering is happening because of this
$images.eq(1).fadeIn(1000, function()
{
$images.eq(0).attr('src', files[index]);
$images.eq(0).show();
$images.eq(1).hide();
if (index == files.length-1){index = 0;}else{index++;}
}
);
After the fadeIn of image at index 1, source is set for image at index 0 and it is shown immediately. This results in flickering.
What you have to do is swap the images.
$images.eq(1).fadeIn(1000, function()
{
$images.eq(0).remove().appendTo('#test'); // swaps the image indices
if (index == files.length-1){index = 0;}else{index++;}
});
See demo here : http://jsfiddle.net/diode/SeL3M/4/
try using the jquery cycle plugin. in has a fade that works great
It works fine in Firefox when you add a small time delay between showing and hiding an element (I've done it by using fadeIn(100, function() in jsfiddle bellow).
http://jsfiddle.net/SeL3M/
You can read more about this behavior here:
unwanted "flickering" effect when using hide and show in jquery
I have just written my first app in phonegap that simply replaces a text string on the screen each time you activate a link.
The original string stays where it is and the new string is written over the top. If you then activate the link again the second string is replaced with a new one but still over the top of the first string.
I have tried clearing the variable to fix this but no luck.
Is this a platform limitation or am i doing something wrong?
Code is below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload="newIdea()">
<h1 class="h1">First Love</h1>
<p>Have you ever? </p>
<h3><div id="ideaDiv">Nothing</div></h3>
Let's Do it
No Thanks
<script type="text/javascript">
var ideas=new Array(); // regular array (add an optional integer
ideas[0]="Kissed someone in the rain"; // argument to control array's size)
ideas[1]="Eaten peking duck";
ideas[2]="Stood naked in the open";
function newIdea(){
var idea = "";
var idea = ideas[Math.floor(Math.random()*ideas.length)];
var ideaSpace = document.getElementById("ideaDiv");
ideaSpace.innerHTML=idea;
var ideaLink=document.getElementById("ideaLink");
var linkCreate="http://www.google.com/calendar/event?action=TEMPLATE&text=" + idea + "&dates=20120101/20120102&details=&location=&trp=false&sprop=&sprop=name:";
ideaLink.href=linkCreate;
}
</script>
</body>
</html>
Thanks
Simon
I have no experience with phonegap, but in the past I found some problems trying to set innerHTML in xhtml documents, it don't check if the string you are using causes the document to still a valid xml and just throws an error, to achieve the same effect try:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body onload="newIdea()">
<h1 class="h1">First Love</h1>
<p>Have you ever? </p>
<h3><div id="ideaDiv">Nothing</div></h3>
Let's Do it
No Thanks
<script type="text/javascript">
var ideas=new Array(); // regular array (add an optional integer
ideas[0]="Kissed someone in the rain"; // argument to control array's size)
ideas[1]="Eaten peking duck";
ideas[2]="Stood naked in the open";
function newIdea(){
var idea = "";
var idea = ideas[Math.floor(Math.random()*ideas.length)];
var ideaSpace = document.getElementById("ideaDiv");
//ideaSpace.innerHTML=idea;
ideaSpace.removeChild(ideaSpace.firstChild);
ideaSpace.appendChild(document.createTextNode(idea));
var ideaLink=document.getElementById("ideaLink");
var linkCreate="http://www.google.com/calendar/event?action=TEMPLATE&text=" + idea + "&dates=20120101/20120102&details=&location=&trp=false&sprop=&sprop=name:";
ideaLink.href=linkCreate;
}
</script>
</body>
</html>