If I load the video by passing the file at initialisation time, it works:
var jw = jwplayer('container').setup({
width: 528,
height: 295,
skin: 'skins/rizla/rizla.xml',
bufferlength : 0.1,
modes: [
{type: 'flash', src: 'jwplayer/player.swf'},
{type: 'html5'}
],
file : 'http://full/path/to/video.mp4',
});
However, if I used the load method from the player API, it plays fine in browsers (with Flash disabled so the HTML5 version loads) but won't play on the iPad / iPhone (but with no errors displayed):
jw.load({file : 'http://full/path/to/video.mp4'});
Examining the results of jw.getPlaylist() for each type of loading reveals very different values but that might unrelated to the issue.
Note: The video plays fine when linked to directly, opening in the default media player so it's not a video issue but a jwPlayer-specific issue.
It seems to work in version 6.0. See js fiddle:
http://jsfiddle.net/hRAKQ/4/
var jw = jwplayer("test").setup({
file: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
});
$('button').on('click', function() {
jwplayer("test").load([{
file: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
image: "http://lorempixel.com/320/180/"
}]);
});
Related
I had everything working fine until about two weeks ago. I haven't changed any code.
function loadYtVideo(video, advert, advert_link, splash, splash_link){
var params = { allowScriptAccess: "always", wmode: "transparent" };
var atts = { id: "eda-player", wmode: "transparent" };
var swfobject;
adv.orig = video;
swfobject.embedSWF("https://www.youtube.com/v/"+adv.orig+"?rel=0&enablejsapi=1&playerapiid=ytplayer","ytapiplayer", "719", "404", "8", null, null, params, atts);
}
function onYouTubePlayerReady(playerId) {
//It's fired
edaplayer = document.getElementById('eda-player');
edaplayer.addEventListener("onStateChange", "playerState");
}
function playerState(state) {
//it's not fired
console.log(state);
}
<div class="adv-video">
<div id="ytapiplayer">
<script>
$(document).ready(function(){
loadYtVideo($.getUrlVar('ytVideo'), 'eM2ja9LE0YE', 'http://wilmax.ru/', '', '');
});
</script>
</div>
</div>
I found posts with similar problem, but solutions in those posts are not working in this case.
Any help would be greatly appreciated.
I would suggest you move to YouTube IFrame Player API:
The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript. Unlike the Flash and JavaScript player APIs, which both involve embedding a Flash object on your web page, the IFrame API posts content to an <iframe> tag on your page. This approach provides more flexibility than the previously available APIs since it allows YouTube to serve an HTML5 player rather than a Flash player for mobile devices that do not support Flash.
Flash API and JS API has already been deprecated. I'm not sure if it still work with the current API that is why I suggest you to use Iframe API
Here are some sources that may help you:
JS Fiddle Demo
embedding Flash
Related SO question
Hope this helps!
I face problems with my HTML5 App for decoding barcodes with JavaScript. For testing reasons I run the implemented algorithms against a database with 1055 pictures (Muenster BarcodeDB with a resolution of 600x800px). It works fine in Chrome on Windows and Safari on iPad 2. But Chrome on my Moto G (Android) crashes after 20-30 pictures without any message. When I use HTML5 Media Capture with camera photos it also crashes after taking several pictures and Chrome reports, that there isn't enough memory for the previous operation. It crashes directly, when the picture was taken and the camera app is closed. Then the browser is shown again with a reaload of the page.
Did anyone face the same problems? Below is some code on how to use the pictures.
HTML Media Capture Input:
<input id="upload" type="file" accept="image/*" capture style="display:none;">
JavaScript Handler (exif.js, megapixImg.js for rotating/scaling image):
fileInput.onchange = function () {
var file = fileInput.files[0];
imgOrientation = null;
// get orientation of image from exif data
EXIF.getData(file, function () {
imgOrientation = EXIF.getTag(this, "Orientation");
});
// MegaPixImage constructor accepts File/Blob object.
megapixImg = new MegaPixImage(file);
// Render resized image into image element using quality option.
// Quality option is valid when rendering into image element.
megapixImg.render(tempImg, { maxWidth: maxDimension, maxHeight: maxDimension, quality: 1.0 });
};
tempImg.onload = function () {
// Render resized image into canvas element.
megapixImg.render(tempCanvas, { maxWidth: maxDimension, maxHeight: maxDimension, orientation: imgOrientation });
// TRIGGER ALGORITHM
};
For your HTML5 media capture problem, you are likely running into the following bug:
https://code.google.com/p/android/issues/detail?id=53088
Unfortunately, the android developers have marked the issue as obsolete, which it is not. A few potential workarounds are discussed in the aforementioned thread, but none of them really suit my needs. Maybe you will have better luck. :)
I'm using the HTML5 Background Video script (https://github.com/Victa/HTML5-Background-Video), and I'd like to be able to add some volume/play controls. I tried integrating solutions I found for other HTML5 video players, to no avail.
Minimally, I'd like a mute/volume control. Play/pause/stop would be optionally cool.
Here's the script calling the video:
var videobackground = new $.backgroundVideo($('#bgVideo'), {
"align" : "centerXY",
"path" : "video/",
"width": 1280,
"height": 720,
"filename" : "cows",
"types" : ["mp4", "webm"]
});
The site where I'm using the video is a Bootstrap template, and is located here: http://harbourcitydevelopment.com/beef/samples/sample-04/
Thanks for any ideas!
In the file 'jquery.backgroundvideo.min.js', I just added muted="true" and controls="true", and it did the trick. Thanks to Atutouato for the suggestion with .play(), .pause(), which put me on the right track!
I'm trying to add music to a virtual tour application I'm writing in JS and jQuery and so far my code, shown below, works great in Chrome, FF, IE9, and Opera. But in Safari 5.1.7, which is the newest you can get for a Windows machine, it just doesn't work... Through my research of the problem, I know that Safari doesn't autoplay music and it has to be started manually, but when I click the play button, nothing happens. And, btw, the code inspector in Safari shows that my audio tag is there with the music sources so I don't think it has anything to do with the DOM. Any ideas on my problem?
HTML:
<div id="musicBtns">
<p>Music:</p>
<p id="musicPlayBtn">Play</p>
<p>/</p>
<p id="musicPauseBtn">Pause</p>
</div>
My music object in JS:
var Music =
{
musicBtns: $('#musicBtns'),
playBtn: $('#musicPlayBtn'),
pauseBtn: $('#musicPauseBtn'),
isPlaying: false,
init: function()
{
if(!music.includeMusic) // If the client didn't want any music in the tour app, remove the music btns from the DOM
{
this.musicBtns.remove();
}
else // Else, setup the audio element
{
var parent = this;
var audio = $('<audio loop="true">');
if(music.autoplay)
{
audio.attr('autoplay', 'autoplay');
this.isPlaying = true;
this.togglePlayPause();
}
// Add a source elements and appends them to the audio element
this.addSource(audio, music.ogg); // 'music.ogg' is a reference to the path in a JSON file
this.addSource(audio, music.mp3);
this.musicBtns.append(audio);
// Add event listeners for the play/pause btns
this.playBtn.click(function()
{
audio.trigger('play');
parent.isPlaying = true;
parent.togglePlayPause();
});
this.pauseBtn.click(function()
{
audio.trigger('pause');
parent.isPlaying = false;
parent.togglePlayPause();
});
}
},
addSource: function(el, path)
{
el.append($('<source>').attr('src', path));
},
// Add or remove classes depending on the state of play/pause
togglePlayPause: function()
{
if(this.isPlaying)
{
this.playBtn.addClass('underline');
this.pauseBtn.removeClass('underline');
}
else
{
this.playBtn.removeClass('underline');
this.pauseBtn.addClass('underline');
}
}
}
Edit: Could this be a bug in Safari?
So the problem turned out to be with QuickTime. I guess I must of deleted it off of my machine awhile back because I didn't think I needed it. After I re-installed QuickTime, Safari plays music using the audio tag with no problem. Autoplay even works too.
Kinda funny how the champion of native HTML5 audio/video support, doesn't support HTML5 audio/video without a plugin...
In HTML5 video on Safari I had an issue with this where I had to "load" (which, I think, either starts the buffer or loads the whole thing) before I set it to play. This seemed to actually make things work in a few webkit browsers. So something like:
var a = new Audio("file.mp3");
a.load();
a.play();
Worth a try
When a certain event occurs, I want my website to play a short notification sound to the user.
The sound should not auto-start (instantly) when the website is opened.
Instead, it should be played on demand via JavaScript (when that certain event occurs).
It is important that this also works on older browsers (IE6 and such).
So, basically there are two questions:
What codec should I use?
What's best practice to embed the audio file? (<embed> vs. <object> vs. Flash vs. <audio>)
2021 solution
function playSound(url) {
const audio = new Audio(url);
audio.play();
}
<button onclick="playSound('https://your-file.mp3');">Play</button>
Browser support
Edge 12+, Firefox 20+, Internet Explorer 9+, Opera 15+, Safari 4+, Chrome
Codecs Support
Just use MP3
Old solution
(for legacy browsers)
function playSound(filename){
var mp3Source = '<source src="' + filename + '.mp3" type="audio/mpeg">';
var oggSource = '<source src="' + filename + '.ogg" type="audio/ogg">';
var embedSource = '<embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3">';
document.getElementById("sound").innerHTML='<audio autoplay="autoplay">' + mp3Source + oggSource + embedSource + '</audio>';
}
<button onclick="playSound('bing');">Play</button>
<div id="sound"></div>
Browser support
<audio> (Modern browsers)
<embed> (Fallback)
Codes used
MP3 for Chrome, Safari and Internet Explorer.
OGG for Firefox and Opera.
As of 2016, the following will suffice (you don't even need to embed):
let src = 'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3';
let audio = new Audio(src);
audio.play();
See more here.
One more plugin, to play notification sounds on websites: Ion.Sound
Basic Demo
Advanced Demo
Ion.Sound GitHub Page
Advantages:
JavaScript-plugin for playing sounds based on Web Audio API with fallback to HTML5 Audio.
Plugin is working on most popular desktop and mobile browsers and can be used everywhere, from common web sites to browser games.
Audio-sprites support included.
No dependecies (jQuery not required).
25 free sounds included.
Set up plugin:
// set up config
ion.sound({
sounds: [
{
name: "my_cool_sound"
},
{
name: "notify_sound",
volume: 0.2
},
{
name: "alert_sound",
volume: 0.3,
preload: false
}
],
volume: 0.5,
path: "sounds/",
preload: true
});
// And play sound!
ion.sound.play("my_cool_sound");
How about the yahoo's media player
Just embed yahoo's library
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
And use it like
<a id="beep" href="song.mp3">Play Song</a>
To autostart
$(function() { $("#beep").click(); });
Play cross browser compatible notifications
As adviced by #Tim Tisdall from this post , Check Howler.js Plugin.
Browsers like chrome disables javascript execution when minimized or inactive for performance improvements. But This plays notification sounds even if browser is inactive or minimized by the user.
var sound =new Howl({
src: ['../sounds/rings.mp3','../sounds/rings.wav','../sounds/rings.ogg',
'../sounds/rings.aiff'],
autoplay: true,
loop: true
});
sound.play();
Hope helps someone.
if you want calling event on the code The best way to do that is to create trigger because the browser will not respond if the user is not on the page
<button type="button" style="display:none" id="playSoundBtn" onclick="playSound();"></button>
now you can trigger your button when you want to play sound
$('#playSoundBtn').trigger('click');
if you want to automate the process via JS:
Include somewhere in the html:
<button onclick="playSound();" id="soundBtn">Play</button>
and hide it via js :
<script type="text/javascript">
document.getElementById('soundBtn').style.visibility='hidden';
function performSound(){
var soundButton = document.getElementById("soundBtn");
soundButton.click();
}
function playSound() {
const audio = new Audio("alarm.mp3");
audio.play();
}
</script>
if you want to play the sound just call performSound() somewhere!
Use the audio.js which is a polyfill for the <audio> tag with fallback to flash.
In general, look at https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills for polyfills to the HTML 5 APIs.. (it includes more <audio> polyfills)
var audio = new Audio('audio_file.mp3');
function post()
{
var tval=document.getElementById("mess").value;
var inhtml=document.getElementById("chat_div");
inhtml.innerHTML=inhtml.innerHTML+"<p class='me'>Me:-"+tval+"</p>";
inhtml.innerHTML=inhtml.innerHTML+"<p class='demo'>Demo:-Hi! how are you</p>";
audio.play();
}
this code is from talkerscode For complete tutorial visit http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php
I wrote a clean functional method of playing sounds:
sounds = {
test : new Audio('/assets/sounds/test.mp3')
};
sound_volume = 0.1;
function playSound(sound) {
sounds[sound].volume = sound_volume;
sounds[sound].play();
}
function stopSound(sound) {
sounds[sound].pause();
}
function setVolume(sound, volume) {
sounds[sound].volume = volume;
sound_volume = volume;
}
We can just use Audio and an object together like:
var audio = {};
audio['ubuntu'] = new Audio();
audio['ubuntu'].src="start.ogg";
audio['ubuntu'].play();
and even adding addEventListener for play and ended