We Keep Coding

Javascript play audio when loaded

so I have a code for volume slider. What it does is that it plays sound when you have changed volume after loading the slider. For example if default value of the slider is 50 it wont play sound right after loading the audio file, you need to change value to higher or lower so sound can come out. So I need help with JavaScript. What can I do so it starts playing the sound whenever is loaded?
Full code : https://www.w3schools.com/code/tryit.asp?filename=FQZVZUX36JFD
JS:
$("#volume").slider({
min: 0,
max: 100,
value: 50,
range: "min",
slide: function(event, ui) {
setVolume(ui.value / 100);
}
});
var myMedia = document.createElement('audio');
$('#player').append(myMedia);
myMedia.id = "myMedia";
playAudio('http://listen.shoutcast.com/newfm64aac-', 0);
function playAudio(fileName, myVolume) {
myMedia.src = fileName;
myMedia.setAttribute('loop', 'loop');
setVolume(myVolume);
myMedia.play();
}
function setVolume(myVolume) {
var myMedia = document.getElementById('myMedia');
myMedia.volume = myVolume;
}

Google recently released a browser update that prevents initial playing or autoplaying of media elements (Note: not the solution for this answer, but a potential solution for similar cases.)

You're setting the initial volume to zero with this call:
playAudio('http://listen.shoutcast.com/newfm64aac-', 0);
To have it load at a default of 50 your call should be:
playAudio('http://listen.shoutcast.com/newfm64aac-', 50);

VIdeo playback not working on samsung tv

I created a sample application using samsung tv sdk and added video player with the bellow code.but it does not playing my video
SceneScene1.prototype.initialize = function () {
alert("SceneScene1.initialize()");
// this function will be called only once when the scene manager show this scene first time
// initialize the scene controls and styles, and initialize your variables here
// scene HTML and CSS will be loaded before this function is called
sf.service.VideoPlayer.init({
onend:function(){
sf.service.VideoPlayer.setFullScreen(false);
}
});
sf.service.VideoPlayer.setKeyHandler(sf.key.RETURN,
function(){
sf.service.VideoPlayer.setFullScreen(false);
});
var vLeft = parseInt($("#svecVideo_y5ww").css('left'));
var vTop = parseInt($("#svecVideo_y5ww").css('top'));
var vHeight = parseInt($("#svecVideo_y5ww").css('height'));
var vWidth = parseInt($("#svecVideo_y5ww").css('width'));
sf.service.VideoPlayer.setPosition({
left:vLeft,
top:vTop,
width:vWidth,
height:vHeight
});
sf.service.VideoPlayer.show();
sf.service.VideoPlayer.play({
url: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
fullScreen: false,
title: 'Samsung movie',
startTime: 5,
liveStream: false,
timeString: true,
authHeader: 'none'
});
};
and if we try to inspect using web inspector.it shows the bellow errors
Service is unavailable due to network or service interference.
The file can't be played because the format isn't supported.
Unable to play the file. Please check it and try again later.
i tried with different files,and shows the same error

Cretive SDK Image Editor UI not show custom, resizable text (WEB)

I made one email app where I want to use Adobe Creative SDK for editing images and adding text over image. All works almost great but when I click on "text" button and trying to add new layer (Add Text) I not see anything. All options is there, no erros in console just text layer not show up and I'm unable to insert text over image.
Here is my setup:
var featherEditor = new Aviary.Feather({
apiKey: '[MY-ID]',
tools : ['text','crop','resize','color'],
fileFormat : 'png,jpg,gif,jpeg',
theme:'light',
displayImageSize : true,
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src,
cropPresets: [
'Original',
['Mail App','600x600'],
'4:3',
'16:9'
],
});
return false;
}
I also remove my CSS from this page and leave clean Adobe library and nothing chaged.
Can anyone help me?

I find solution for my problem. I just add one CSS code:
#avpw_canvas_element.avpw_position_by_transform {
z-index: 0;
}
This fix my layering problem and all work great.

Fading out the page while a youtube video is playing

How can you fade out /or place a black semi-transparent cover over the entire page when an embedded youtube video is playing and have it go back to normal when the video is over or paused?
javascript?
jquery?
This is as far as I got, I don't know enough coding (just html/css) to use it though:
https://developers.google.com/youtube/js_api_reference#Adding_event_listener
I figured out how to use the API to call the video and have some event listener code I found in the API to call functions on state changes (ex play and end video), though I'm not sure why the listener part isn't working.. I don't have any experience with API's or javascript at this level..
$(document).ready(function(){
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF(
"http://www.youtube.com/v/TEHWDA_6e3M?enablejsapi=1&playerapiid=ytplayer&version=3",
"ytapiplayer",
"960",
"540",
"8",
null,
null,
params,
atts
);
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}
function onytplayerStateChange(newState) {
alert("Player's new state: " + newState);
}
});

Place a div with position:fixed and background-color: rgba(0, 0, 0, 0.75) that covers the entire page and then place the video on top of it by listening for the onStateChanged event from the player. You will have to use the javascript player api for this to work.

How to send a seek event to player embedded with SWFObject 2.2?

I have updated my SWFObject to 2.2 from 1.5 and now need to replicate some old functionality that used to work in 1.5, viz an event jumping to a certain point in the video.
Here's the contents of my script tag:
var flashvars = {
file: '79834.flv',
autostart: 'true',
displayclick: 'mute',
repeat: 'single',
start: 0
};
var params = {
allowfullscreen: "true",
allownetworking: "all",
allowscriptaccess: "always"
};
swfobject.embedSWF("player.swf","main","500","400","9.0.0", "false", flashvars, params);
var player;
function playerReady(obj) {
player = document.getElementById(obj.id);
alert(player);
setTimeout("seek()", 1000);
}
function seek() {
player.sendEvent("SEEK", 100);
}
The top half is what I've replaced the old V1.5 code with.
The bottom half (from "var player") is what no longer works. playerReady is still happening, but apparently obj.id is now "null". Is there a new correct way to find the player element? Or a different way to implement a seek event?

You missed the id attribute:
var attributes = {
id: "playerID"
}
// and later
swfobject.embedSWF("player.swf","main","500","400","9.0.0", "false", flashvars, params, attributes);