I want to integrate a webplayer on my website to play my m3u streaming file.
I found this javascript file on github and tried to get it running. Unfortunately without success.
https://github.com/aitorciki/jquery-playlist
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.playlist.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('audio').playlistParser({
proxy: 'proxy.php'
});
});
</script>
<audio controls src="http://www.stream.com/stream.m3u">
</body>
</html>
the proxy.php file:
$url = file_get_contents($_GET["url"]);
echo $url;
Or is there a completely different solution?
Thanks
it seems the playlist plugin works with jQuery v3, not jQuery v1. After I modify your code to use jQuery v3, it works for me
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.playlist.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('audio').playlistParser({
proxy: 'proxy.php'
});
});
</script>
<audio controls src="http://www.stream.com/stream.m3u">
</body>
</html>
Related
I am having a lot of trouble trying to add text to an existing <p> element using jQuery. I have tried many different methods but nothing has worked so far. Here is the code for the html file:
<!doctype html>
<html>
<head>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
<body>
<button id="creategame" >Create game</button>
<p id="demo">Hello</p>
<script>
$(document).ready(function(){
$('#creategame').click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
My guess is you don't load jQuery file, and the console has
$ is not defined
error. Simply, add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
to <head> tag
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
You are missing the jQuery file. Add this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> to your file above the <script src="index1.js"></script>. Make sure it's above it because if it's not then you can't call the jQuery functions in the your index1.js file.
try using the .html() function:
$("#demo").html("Test");
The following worked for me.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id='createGame' class="btn btn-default">Click</button>
<p id="demo">Hello</p>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function() {
$("#createGame").click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
You need to reference jQuery in a <script> tag somewhere.
In the javascript assets file I have a jstester.js file like this:
function hehe()
{
alert("wedsdsd");
}
document.write("fdygsdfysdgf");
Then in the public index.html file I have this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="/assets/jstester.js">
hehe();
</script>
</body>
</html>
So I thought that is how I can call a method from my Javascript file but looks like it is not working, no message box shows up... So what is the correct way of doing this?
If a <script> has a src then the text content of the element will be ignored.
so you can't do:
<script type="text/javascript" src="assets/jstester.js">
hehe();
</script>
but:
<script type="text/javascript" src="assets/jstester.js"></script>
<script>hehe();</script>
This is what you looking for:
<body>
<script src="/assets/jstester.js"></script>
<script type="text/javascript">hehe();</script>
</body>
I am using phonegap, and this code loads perfectly in my android mobile.But When i click the button it does not shows the text.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
});
</script>
</head>
<body>
<p id="test1"></p>
<button id="btn1">Set Text</button>
</body>
</html>
I don't think that JQuery is being loaded into the page.
You have referenced it as
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
which says use whatever protocol the current page is being server from. On a mobile device you are being served from file:// so the actual request the browser makes to fetch the script is:
file://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
You need to specify the scheme you want to use or else include it in the PG project itself.
When working with mobile devices, it is greatly recommended that you use the mobile version of jquery, jquery.mobile.js
Then you can use vclick and everything works fine:
Normalized event for handling touchend or mouse click events on touch
devices.
$(document).ready(function(){
$("#btn1").vclick(function(){
$("#test1").text("Hello world!");
});
});
try using this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).on('pageinit', function(event){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
});
</script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js">
</script>
</head>
<body>
<p id="test1"></p>
<button id="btn1">Set Text</button>
</body>
</html>
Instead of doc ready use pageinit of jQuerymobile if developing for mobile apps.
EDIT: Wow, solved it by placing the 'file' and 'flashplayer' configs first in the configuration section. I guess those two parameters have to be first in the configuration section.
So this works (You cant load the file from longtailvideo.com like this because of cross domain stuff, just use your own local file to test)
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="jwplayer.js"></script>
</head>
<body>
<div id="vs" style="width:300px;height:250px;"></div>
Toggle the audio
</body>
</html>
<script type="text/javascript">
jwplayer("vs").setup({
file: "http://content.longtailvideo.com/videos/flvplayer.flv",
flashplayer: "player.swf",
autostart:true,
controlbar: "none",
icons: "false",
repeat:"always",
stretching:"exactfit",
width:300,
height:250,
mute:"true"
});
</script>
Can't get the mute toggle working. According to Longtail's documentation (http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/16022/controlling-the-player-using-javascript) all I have to do is make a link with an onclick. Doesnt work. I even tried a .click with JQuery to no avail. Using MP4 files so the code falls back from flash to HTML5 video.
This doesnt work either with JQuery included in the page
<script type="text/javascript">
$(document).ready(function(){
$('#mutetoggle').click(function(){
jwplayer().setMute();
});
});
</script>
JW Player with JW javascript for embed:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="jwplayer.js"></script>
</head>
<body>
<div id="vs" style="width:300px;height:250px;"></div>
Toggle the audio
</body>
</html>
<script type="text/javascript">
jwplayer("vs").setup({
autostart:true,
controlbar: "none",
icons: "false",
repeat:"always",
stretching:"exactfit",
file: "http://content.longtailvideo.com/videos/flvplayer.flv",
flashplayer: "player.swf",
volume:50,
width:300,
height:250,
mute:"true"
});
</script>
It seems the file and flashplayer parameters have to be first in the configuration section.
Go figure.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="jwplayer.js"></script>
</head>
<body>
<div id="vs" style="width:300px;height:250px;"></div>
Toggle the audio
</body>
</html>
<script type="text/javascript">
jwplayer("vs").setup({
file: "http://content.longtailvideo.com/videos/flvplayer.flv",
flashplayer: "player.swf",
autostart:true,
controlbar: "none",
icons: "false",
repeat:"always",
stretching:"exactfit",
width:300,
height:250,
mute:"true"
});
</script>
I have a jQuery library code in jquery.xyz.js .
I have an html file which uses the function defined in jquery.xyz.js in this manner .
<html>
<body>
<script type="text/javascript">
document.write("This is my first JavaScript!");
$(function(){ $("ul#xy01").xyz(); });
</script>
</body>
</html>
But the jQuery is not running, which I am assuming because I haven't loaded the jQuery properly onto the html page. So how do I do it?
<script type="text/javascript" src="jquery.js"></script>
See how jQuery works in the manual for the basics, and the download page to fetch the library (or to find out addresses for direct linking on a Content Delivery Network).
You just need to include the script files before using functions defined in them ($ is just a function), for example:
<html>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.xyz.js"></script>
<script type="text/javascript">
$(function(){ $("ul#xy01").xyz(); });
</script>
</body>
</html>
Be sure to include jQuery before plugins that rely on it, or you'll get some errors first thing.
<script>
var script = document.createElement('script');
script.onload = function () {
//do stuff with the script
};
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/xx.xx/jquery.min.js';
document.head.appendChild(script);
</script>
<script type="text/javascript" src="PATH TO YOUR JS FILE"></script>
Stick this above your jQuery code in the <head></head>
<script src="/js/jquery.js" type="text/javascript"></script>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
</head>
<body>
<script type="text/javascript">
document.write("This is my first JavaScript!");
$(function(){ $("ul#xy01").xyz(); });
</script>
</body>
</html>