I've weirdest problem where I can successfully play 1 shoutcast station and cannot some other using jplayer. This is strange as information of shoutcast server hints on similar configuration:
http://198.27.79.224:9770/
http://108.61.73.119:8128/
I must also note that flash version of jplayer plays both, but html version only plays first one.
Jplayer js looks like this
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
}, [
{
title:"#1 Stream",
mp3:"http://108.61.73.119:8128/;stream/1"
},
{
title:"#2 Stream",
mp3:"http://108.61.73.118:8128/;stream/1"
},
{
title:"#3 Stream",
mp3:"http://108.61.73.117:8128/;stream/1"
},
{
title:"#4 Stream",
mp3:"http://198.27.79.224:9770/;stream/1"
},
], {
swfPath: "jplayer",
supplied: "mp3",
wmode: "window",
preload: "none",
//solution: "flash, html",
smoothPlayBar: true,
keyEnabled: true
});
$("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
});
//]]>
</script>
Any ideas?
It seems flash version plays all of the streams, but html5 version only selected few. I never got to the bottom of the problem.
Related
Good morning Masters ^^
Firstly, i just have a small problem what i cant solve o.o
I have a google chrome extension program which made those :
- If mouse event happening then open one other page (itself detectionclicks.js)
- If until 5 minutes not happening mouse event open back the before page (itself background.js)
My problem is that, when we reach the 5 minutes, the site cant apper when i use "_self" but apper if i use "_blank".... but in detectionclicks.js the "_self" is working properly. Maybe under the background.js i cant use "_self" parameters?
I use Google Chrome browsers - Version 63.0.3239.108 (Official Build) (64-bit) (under windows 10).
So everything is working perfectly (I mean the timer, and reset the timer also, and the detectionclicks.js open the site itself properly..) just under the background.js window.open "_self" wont want working, just if i use "_blank".
Manifest.json
{
"name": "Chrome-extension",
"version": "1.0",
"manifest_version": 2,
"permissions": [
"alarms", "cookies"
],
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery1.7.2.js", "detectclicks.js", "background.js"]
}
],
"description": "Chrome-extension",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
Background.js
chrome.runtime.onMessage.addListener(function(msg, _, sendResponse) {
if (msg.setAlarm) {
chrome.alarms.create({delayInMinutes: 0.1});
} else if (msg.delayedResponse) {
setTimeout(function() {
sendResponse("Got your message.");
}, 300000);
return true;
} else if (msg.getCounters) {
sendResponse({counter: counter++,
persistentCounter: localStorage.counter++});
}
});
chrome.alarms.onAlarm.addListener(function() {
window.open("http://www.google.com","_blank"); //THIS IS WORK
// window.open("http://www.google.com","_self"); THIS ISN'T WORK
});
Detectionclicks.js
$('html').on('click', '*', function(event) {
window.open("http://gmail.com","_self");
});
$('html').on('mousemove','*', function(event) {
chrome.runtime.sendMessage({setAlarm: true});
});
Popup.html
<style>
div.content { width: 250px }
</style>
<!DOCTYPE html>
<html>
<body>
<div class="content">
<p>
Site information : This extension will open a new site
after 5 minutes if wont happening a mouse event. If mouse
event happening, the extension will open an other site.
</p>
</div>
</body>
</html>
Popup.js
chrome.extension.getBackgroundPage().timers[tabId] = new Date();
Thank you for your supporting ^^, even if you just read it :)
Please use this
chrome.tabs.create({ url: "http://gmail.com" });
instead of
window.open("http://gmail.com","_self");
more reference please visit https://developer.chrome.com/extensions/tabs#method-create
I can solve the problem in this way ^^'
I know this isn't the best solution, but its looks like made what i want.
(Close the site and open other one... its looks like change the active site ^^')
chrome.tabs.query({active:true,currentWindow:true},function(tabs){
chrome.tabs.remove(tabs[0].id);
});
window.open("http://www.gmail.com","_blank");
});
Thank you for your help, and as i read your solution the original way, but i don't know why open the new tab the site in my chrome browsers o.o ...
So even if i use other solution, i think i accept your answer ^^
Thank you for your help :)
I'm trying to do a simple POC using the Azure Media Player in my application using Alternative Setup for dynamically loaded HTML using JavaScript from this blog post. I'm getting an error when trying to load via javascript as described below.
If I simply include the javascript files and follow the example "Step 2: Add the HTML video tag to your page" it works:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" poster="" data-setup='{"nativeControlsForTouch": false}' tabindex="0">
<source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
<p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
But I try to load it dynamically via javascript as described in "Alternative Setup for dynamically loaded HTML using JavaScript" I get an error
Uncaught Error: Error: TypeError: URL.createObjectURL is not a function azuremediaplayer.min.js:2
What I'm trying:
To keep it real simple I'm just trying to get it to load a video in response to a button click.
I have this code in place which is just a direct copy of the example provided.
HTML:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered">
</video>
<button id="amsbutton" type="button">Load</button>
Javascript:
$("#amsbutton").on("click", function () {
AMSVideo();
});
function AMSVideo() {
var myOptions = {
"nativeControlsForTouch": false,
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },
]);
}
I tried your code with one minor tweak to not use jQuery and it seems to work fine. Also, if you are ever having trouble, please check out our samples page which has several working examples of loading Azure Media Player using the <video> tag method or dynamically loading using JavaScript
in the <head> of the HTML page, add the Azure Media Player scripts:
<script src="//amp.azure.net/libs/amp/1.1.0/azuremediaplayer.min.js"></script>
<link href="//amp.azure.net/libs/amp/1.1.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<!-- Set the location of the fallback techs -->
<script>
amp.options.flashSS.swf = "//amp.azure.net/libs/amp/1.1.0/techs/StrobeMediaPlayback.2.0.swf"
amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/1.1.0/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/1.1.0/techs/SmoothStreamingPlayer.xap"
</script>
In the <body> of the HTML Page:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered"></video>
<button id="amsbutton" type="button" onclick="AMSVideo()">Load</button>
JavaScript:
function AMSVideo() {
var myOptions = {
"nativeControlsForTouch": false,
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },
]);
}
If you are still having difficulty, please reach out to ampinfo#microsoft.com for more assistance.
I never found out exactly what the conflict was, but this turned out to be an incompatibility with CKEDITOR 4.3.1. When I commented out my ckeditor code:
CKEDITOR.replace('text-content', {
toolbar: 'Basic',
uiColor: '#9AB8F3',
});
the problem went away. Fortunately, whatever it was is addressed in later version of ckeditor. I dropped in ckeditor from their cdn //cdn.ckeditor.com/4.4.7/standard/ckeditor.js" and the problem seems to be gone. Since this points to the "standard" version of ckeditor, I will update this if it turns out to be more specific like a particular ckeditor plugin for instance.
I am making an online scan application just with HTML5 and javascript using Quagga.js.
I need to get the webcam working for searching barcodes and imported quagga.js :
On the web page of quagga you'll find a method called Quagga.init. to initialize the webcam view.
I entered in the script tags this code :
Quagga.init({
inputStream : {
name : "Live",
type : "LiveStream"
},
decoder : {
readers : ["code_128_reader"]
}
}, function() {
console.log("Initialization finished. Ready to start");
Quagga.start();
});
But nothing happened.
What do I need to do to get this webcam working?
Any other opinions to create a web-based application for scanning barcodes ?
Thank you for answering !
Include <div id="interactive" class="viewport"></div> into your markup.
It's a few months old question but Eugene's answer is not full. For me, to make QuaggaJS work I had to add video tag as well:
<div id="interactive" class="viewport">
<video autoplay="true" preload="auto"></video>
</div>
Have you checked your console?
Using "Livestream" (Access to Camera) requires you to have a SSL certified website.
It means the additional "s" in https://
You can read more about it here: https://support.google.com/adwords/answer/2580401?hl=sv
You should also know that you can get a free SSL certificat, but you need to have access to your server. Most hosting services can help you with this.
Add in html
<div id="barcode-scanner" class="size"> </div>
Add in JavaScript
Quagga.init({
inputStream : {
name : "Live",
type : "LiveStream",
target: document.querySelector('#barcode-scanner'),
constraints: {
width: 520,
height: 400,
facingMode: "user" //"environment" for back camera, "user" front camera
}
},
decoder : {
readers : ["code_128_reader","code_39_reader"]
}
}, function(err) {
if (err) {
esto.error = err;
console.log(err);
return
}
Quagga.start();
Quagga.onDetected(function(result) {
var last_code = result.codeResult.code;
console.log("last_code ");
});
});
Works for me in Vue.
Add a div element like this in your markup:
<div id="barcode_canvas"></div>
Then include the target in your input stream like this:
target: document.querySelector('#barcode_canvas')
Quagga.init({
inputStream : {
name : 'Live',
type : 'LiveStream',
target: document.querySelector('#barcode_canvas')
},
decoder : {
readers : ['ean_reader']
}
}, function(err) {
if (err) {
console.log(err);
return
}
console.log('Initialization finished. Ready to start');
Quagga.start();
});
Can't figure this out - I simply want it to carrying on playing the next track when a song is finished.. autoplay set to true.. can't see what's throwing this out?
http://bavanandan.co.uk/press/
(I know, it's old, but I was just searching for a solution myself and stumbled upon this.)
How about
var myPlaylist = new jPlayerPlaylist( {
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1" },
[],
{
swfPath: "wolf-jplayer/assets/js/src",
wmode: "window",
ended: function() {
// continouos play
var i = i+1;
myPlaylist.play(i);
}
}); //jPlayerPlaylist
I use jplayer in my page and when clicked a link I want to play the clicked one. However every time test1.mp3 is played. How can I solve it? The code is below:
the page is as follows if needed:
http://www.dilyurdu.com/audio.htm
function listen(mp3_index){
var mp3_file;
mp3_file="test"+mp3_index+".mp3";
$("#jquery_jplayer_1").jPlayer({
ready: function(event) {
$(this).jPlayer("setMedia", {
mp3: mp3_file,
});
},
swfPath: "http://www.jplayer.org/2.1.0/js",
supplied: "mp3"
});
}
links are as follows:
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<a href="javascript:listen(1);" class="jp-play" >play 1</a><br /><br />
<a href="javascript:listen(2);" class="jp-play" >play 2</a><br /><br />
<a href="javascript:listen(3);" class="jp-play" >play 3</a>
Hey you can do the following.
I instantiate the player on page load:
jQuery("#jquery_jplayer_1").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
supplied: "mp3",
wmode: "window",
preload:"auto",
autoPlay: true,
errorAlerts:false,
warningAlerts:false
});
Then inside a listener, which will be unique for every item,
you need to:
A) Fetch track name/URL, I guess you should be able to figure this out.
B) Pass the track to the setMedia
jQuery("#jquery_jplayer_1").jPlayer("setMedia", {
mp3: "http:xxxx.rackcdn.com/"+track+".MP3"
});
C) Play the track
jQuery("#jquery_jplayer_1").jPlayer("play");
To get the track Id you need to install listeners on your playable items(maybe a a playable class?) and get the track from that one.
i am also looking for a solution for this.
Just created it in jsfiddle visit http://jsfiddle.net/vijayweb/A5LQF/2/
It plays only one song. any help will be grateful.
I found a relevant solution...still play only the first default song.
multiple mp3 links in a single page with jplayer
HTML:
<a class="ChangePath" data-key="1" href="javascript:void(0);">Song1</a>
<a class="ChangePath" data-key="2" href="javascript:void(0);">Song1</a>
<a class="ChangePath" data-key="3" href="javascript:void(0);">Song1</a>
jQuery:
$(function () {
$('.ChangePath').on('click', function () {
$("#jquery_jplayer_1").jPlayer("destroy");
var link = "test" + $(this).data('key') + ".mp3";
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: link
});
},
swfPath: "~/Scripts/jplayer",
supplied: "mp3"
});
player.jPlayer("play", 0);
});
});
If you are using ajax:
$(function () {
$('.ChangePath').on('click', function () {
$.ajax({
$("#jquery_jplayer_1").jPlayer("destroy");
var link = "test" + $(this).data('key') + ".mp3";
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: link
});
},
swfPath: "~/Scripts/jplayer",
supplied: "mp3"
});
player.jPlayer("play", 0);
});
});
});
Depending on your project you might need to change the hyperlinks to something else, but the jQuery will work.
$('.reproducirContenedor').on('click',function(e){// click en el elento a reproducir
e.preventDefault();//para que cuando el usuario haga click en el icono de play no salte la pagina
jQuery("#jquery_jplayer_1").jPlayer({
swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
supplied: "mp3",
wmode: "window",
preload:"auto",
autoPlay: true,
errorAlerts:false,
warningAlerts:false
});
var url_destino=$(this).attr('data-demo');// obtengo la ubicacion del archivo de audio para reproducirlo
jQuery("#jquery_jplayer_1").jPlayer("setMedia", {
mp3:url_destino
});
jQuery("#jquery_jplayer_1").jPlayer("play");
});