hello i am abit new in client side programming and html,
i am trying to excute the following line in firefox and other browsers , the code should
play a sound, problem is that the code works and play the sound on IE and Chrome but not on firefox here is my code:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<script type="text/javascript">
function playsound()
{
var sound= document.getElementById("check");
sound.play();
}
</script>
</head>
<body>
<audio id = "check" preload = "auto">
<source src = "check.mp3" type = "audio/mpeg"></audio>
<input type="button" onclick="playsound()" value="play">
Firefox doesn't support the MP3 format as audio source. If you add a second source file in OGG format, the script should work in Firefox too. See this Link for more info
The fact is that firefox and opera do not support mp3 files in html5 audio tag. You can check supported browser in w3schools. Its work around is that you need a fallback flash audio player.
Related
I have an html code:
<!DOCTYPE html>
<html>
<head>
<title>Adaptive Streaming in HTML5</title>
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
<style>
video {
width: 80%;
height: 80%;
}
</style>
</head>
<body onload="setupVideo()">
<h1>Adaptive Streaming with HTML5</h1>
<video id="videoplayer" controls></video>
<script>
function setupVideo() {
var url = "http://rdmedia.bbc.co.uk/dash/ondemand/bbb/2/client_manifest-common_init.mpd";
//var url = "http://localhost:8000/test.dash.mpd";
var player = dashjs.MediaPlayer().create();
player.initialize(document.querySelector("#videoplayer"), url, true);
}
</script>
</body>
</html>
As you can see, I am trying dash.js to play the .mpd file. It is working fine for "http://rdmedia.bbc.co.uk/dash/ondemand/bbb/2/client_manifest-common_init.mpd", but not working for my test.dash.mpd (running locally at port 8000). I even tried with absolute path for the test.dash.mpd. Still it doesn't work. Just in case the file is corrupted, I tried it in VLC media player, and it works there.
I am wondering what wrong is going on. Is it because the format is supported by VLC but not dash.js? My code is fine as it is working for the other .mpd file. Probably the code is not enough for some specific .mpd files? I also thought that the issue was due to the fact that I was trying to connect localhost here, but even with absolute path it is not working.
I am trying to grab the video element of a webpage and save the image locally.
In my code I have in my C# project:
this.webView.Source = new Uri( localhost:4000/watcher.html );
I'm running a local node server with javascript to display a video of a camera feed and in my watcher.html it looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Viewer</title>
<meta charset="UTF-8" />
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="controls">
<button id="button" onClick="changeCamera(0)">Camera One</button>
<button id="button2" onClick="changeCamera(1)">Camera Two</button>
</div>
<video playsinline autoplay muted></video>
<script src="/socket.io/socket.io.js"></script>
<script src="watch.js"></script>
</body>
</html>
My c# project loads the webpage fine, but How can I grab a picture of the video element and not get the entire screen? I created the following function below to take a picture of the entire screen just to test, it works, but I have no clue on how I can manipulate the webView2 to get my image. Any input on how to achieve this would be amazing. Thanks.
private void TakePicture(string fileName)
{
Bitmap screenGrab = new Bitmap( Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height, System.Drawing.Imaging.PixelFormat.Format32bppArgb );
Graphics g = Graphics.FromImage( screenGrab );
g.CopyFromScreen( Screen.PrimaryScreen.Bounds.Left, Screen.PrimaryScreen.Bounds.Top, 0, 0, screenGrab.Size, CopyPixelOperation.SourceCopy );
screenGrab.Save( fileName + ".jpg", ImageFormat.Jpeg );
}
P.S. I already explored trying to export the jpeg directly from my node server, I spent many many hours trying to get it to work and now I'm exploring other options.
I'm trying to learn the Web Audio API from the MDN tutorial but even the most basic example — no modular synthesis, just playing a simple mp3 file — doesn't seem to work on my end.
I can see the dataset value being switched in the console, the play/pause on the controls change state, and in Firefox and Safari (but not in Chrome) the track locator even advances and the "playing" icon displayed on the browser tab.
(I've added the controls attribute to the audio tag just to have a progress indicator visible).
I can also download the file from the DOM controls and play it using the OS, and I've tried it with three different MP3 files. The computer's speakers are obviously working.
BTW, creating audio with oscillators and the AudioContext object works fine.
I'm out of ideas.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio controls src="song.mp3"></audio>
<button data-playing="false" role="switch" aria-checked="false">
<span>Play/Pause</span>
</button>
<script src="audio.js"></script>
</body>
</html>
JS
'use-strict'
const aCtx = new AudioContext();
const el = document.querySelector('audio');
const track = aCtx.createMediaElementSource(el);
const button = document.querySelector('button');
button.addEventListener('click', function() {
console.log(this);
if (aCtx.state === 'suspended') {
aCtx.resume();
}
if (this.dataset.playing === 'false') {
el.play();
this.dataset.playing = 'true';
} else {
el.pause();
this.dataset.playing = 'false';
}
}, false);
I'm trying to play a simple FLV video using the OSPlayer but the video doesn't appear on the page at all.
Also ran into this problem previously when i tried to embed a swf game. It didn't appear at all.
Everything is hosted on my own PC
Disclaimer:New to coding
(I'm following Jon Ducketts HTML + CSS book)
<!DOCTYPE html>
<html>
<head>
<title>Flash video</title>
<script type="text/javascript" src="../flash/OSFlvPlayer_v4.2/OSplayer.swf"></script>
<script type="text/javascript">
var flashvars = {};
var params = {movie:"../flash/20051210-w50s.flv"};
swfobject.embedSWF("../flash/OSFlvPlayer_v4.2/OSplayer.swf", "race", "400", "400", "8.0.0",
"flashvars", "params");</script>
</head>
<body>
<div id="race"><p>Granny race</p></div>
</body>
</html>
Simply displays "Granny race" and no video.
I have a sample with HTML5 element. I need dynamically create audio element after ajax request and play it. But it doesn't work on mobile! Android 4.1 and IOS7. It works perfect on desktop!
It doesn't work after page load. But it works after press buttom and after press button play on control. Why?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
function play() {
var audio = document.createElement('audio');
audio.autoplay = true;
audio.controls = true;
audio.src='http://s3.amazonaws.com/audiojs/02-juicy-r.mp3';
document.body.appendChild(audio);
audio.play();
}
setTimeout(play, 1000);
</script>
</head>
<body>
<h1>test</h1>
<input type='button' value='Press Me' onclick='play()' />
</body>
</html>
I had the same experience where audio wouldn't play after an AJAX call. I guess it has to do with security settings on mobile. Mobile browsers behave differently. The same happens when trying to call up the keyboard on mobile. It is only possible after a keypress or a click event but not automatically on page load or after an Ajax call.
One solution that I used might be to trigger the sound outside of the Ajax call, in the event that triggered the Ajax call in the first place.