The below code is how I put audio in my webpage. It will play the sound when I received protocol from my slave device.
<script>
function RxProtocol()
{
var a = document.getElementById("audio1");
a.play();
}
</script>
<body>
<audio id="audio1">
<source src="audio.wav" type="audio/wav">
<source src="audio.mp3" type="audio/mpeg">
audio tag not supported.
</audio>
</body>
It is suppose to play the sound each time it received a protocol. But when I use google Chrome, it just play once only (after refresh/reloading the page) when it received the first protocol. After that it is silence when receive protocols.
Other browser like IE9 or firefox do not have this problem. Do you guys know why?
Try adding addEventListener :
<script>
function RxProtocol()
{
var a = document.getElementById("audio1");
a.play();
}
document.addEventListener("load", RxProtocol, false);
</script>
Regards, Daniel
We need to load first for Google Chrome:
function RxProtocol()
{
var a = document.getElementById("audio1");
if (window.chrome) {
a.load();
}
a.play();
}
Related
I'm trying to play an audio when page is loaded, it should be really simple however i can't accomplish it.
The problem is that it is not playing, i tried checking the state of autoplay (True/False) and it says it does playing when page is loaded although it does not, also tried making a function which will change the auto play state to True but it didnt do anything ...
<html>
<head >
<audio controls autoplay id='myAudio'>
<source src="..//sounds//firstpagesong.mp3" type="audio/mp3">
<source src="..//sounds//firstpagesong.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</head>
<body onload="tryy()">
<p id="demo"></p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
function tryy()
{
var audio = document.getElementById("myAudio");
audio.autoplay = true;
audio.load();
}
</script>
</body>
Also looked up for similar question here and tried thier solution as well but none of them worked.
I'm trying to play an audio when page is loaded, it should be really simple...
Yeah, well, it isn't. Autoplay with sound is largely disabled in all mainstream browsers these days.
See also: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
I wish to stream live video in my https website from this http site.
Added reference of hls.min.js into my template. Copy-pasted their code:
<video id="video" width="320" height="240" controls autoplay
class="videoCentered"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('/hls/metsis.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
</script>
into my template, but the player doesn't start to stream.
browser console says:
Uncaught ReferenceError: Hls is not defined
Where exactly is reference error? Here?
hls.loadSource('/hls/metsis.m3u8');
correct working code:
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
<video id="video" width="100%" height="380" controls autoplay
class="videoCentered"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://tv.eenet.ee/hls/metsis.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
</script>
but browser blocks it, because the content must be served over https if my page is loaded over https.
You are getting this error as you are trying to access Hls without importing it. Please import it using the following way
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
A more detailed example can be seen at Getting Started section of HLS documentation
Also, Add the correct reference
hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
I am playing videos one after another in following code,
<html>
<body>
<video src="videos/video1.mp4" id="myVideo" autoplay>
video not supported
</video>
</body>
<script type='text/javascript'>
var count=1;
var player=document.getElementById('myVideo');
player.addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e)
{ e = window.event; }
count++;
player.src="videos/video"+count+".mp4";
}
</script>
Now, my question is, There are many video files having different name (in remote directory) which is on server and
I don't know name of all files. So how to make their queue and play one after another using JavaScript??
This work for me :)
<video width="256" height="192" id="myVideo" controls autoplay>
<source src="video/video1.mp4" id="mp4Source" type="video/mp4">
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
var count=1;
var player=document.getElementById('myVideo');
var mp4Vid = document.getElementById('mp4Source');
player.addEventListener('ended',myHandler,false);
function myHandler(e)
{
if(!e)
{
e = window.event;
}
count++;
$(mp4Vid).attr('src', "video/video"+count+".mp4");
player.load();
player.play();
}
</script>
Your variables are inconsistent:
change
videoplayer.src=nextvid;
to
videoPlayer.src = nextvid;
also, according to the solution that you linked, it appears that the user fixed it by binding it via javascript instead of using the onended attribute. Have you tried that?
videoPlayer.onended(function(e) {
run();
};
Not sure but i did something similar with pictures. Try using an if statement to determine if the video is done playing or a button is pressed and then change the src of the video to the next one in an array ex:
$("#my_videos").attr("src",videos[turn]);
Try to get the list of video files as a response from the server.
Store the response in an Array say "playlist".
Then change the video src as player.src=playlist[count]. Here "count" is the same counter you are using now.
I have a problem with creating a video player in my webpage. I have a list of video title and one video player using object tage.
My purpose: when i click on video title, it will load the video and play according to video's file.
Can anyone help me to solve this problem?
Try the demo
Test video<br>
Pentagon<br>
Cat Giraffe<br>
<video id="player" src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
Your browser does not support the <code>video</code> element.
</video>
<script type="text/javascript">
$(function(e) {
$('a').click(function(e) {
e.preventDefault();
var video_file = $(this).attr('href');
$('#player').attr('src', video_file)[0].play();
});
});
</script>
I am looking for a way to show or hide HTML5 video controls at will via javascript. The controls are currently only visible when the video starts to play
Is there a way to do this with the native video controls?
I'm using google chrome browser.
<video id="myvideo">
<source src="path/to/movie.mp4" />
</video>
<p onclick="toggleControls();">Toggle</p>
<script>
var video = document.getElementById("myvideo");
function toggleControls() {
if (video.hasAttribute("controls")) {
video.removeAttribute("controls")
} else {
video.setAttribute("controls","controls")
}
}
</script>
See it working on jsFiddle: http://jsfiddle.net/dgLds/
Here's how to do it:
var myVideo = document.getElementById("my-video")
myVideo.controls = false;
Working example:
https://jsfiddle.net/otnfccgu/2/
See all available properties, methods and events here: https://www.w3schools.com/TAGs/ref_av_dom.asp
CARL LANGE also showed how to get hidden, autoplaying audio in html5 on a iOS device. Works for me.
In HTML,
<div id="hideme">
<audio id="audioTag" controls>
<source src="/path/to/audio.mp3">
</audio>
</div>
with JS
<script type="text/javascript">
window.onload = function() {
var audioEl = document.getElementById("audioTag");
audioEl.load();
audioEl.play();
};
</script>
In CSS,
#hideme {display: none;}