I'm having issues with the HTMl5 Video Player. I'm setting the video src with a javascript script but it doesn't play on any iOS Device. It works on macOS and any other device though.
Any help?
Here's a snippet of my HTML:
<video class="img-fluid" id="postvideo" playsinline controls autoplay loop controlsList="nodownload">
</video>
And Javascript:
isSupp = vid.canPlayType("video/mp4");
if (isSupp == "") {
vid.src = video;
} else {
vid.src = video;
}
vid.type =
vid.load();
As you can see I already tried playsinline.
Does the video play on the iOS device without the Javascript?
Related
I have a video which is integral to my design and on load the video plays on all devices except IPhones while in low power mode. Using the autoplay attribute the video will start on load in most browsers.
<div class="footage">
<video width="320" height="240" autoplay muted playsinline loop id="videoMob">
<source src="./img/video.mp4" type="video/mp4">
</video>
</div>
After finding out that this did not work I decided to add a .ready function in jquery which activates the video to play if paused on load. Disappointingly this also did not work.
$( document ).ready(function() {
var video = $('#videoMob')[0];
video.paused ? video.play() : video.pause();
});
Please suggest any other ideas?
Came across this too, and found that iOS uses the suspend event (https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event) on low-power-mode. This event actually occurs after the video has loaded the few frames and emmited some on load events.
Using this suspend event we're able to show a fallback UI. For safe measure we can revert this UI if the video ever plays again, say on user interaction.
const videoElement = document.getElementById('myVideo');
videoElement.addEventListener('suspend', () => {
// suspended loading. Show play UI..
});
videoElement.addEventListener('play', () => {
// remove play UI
});
The answer from #paulcol. wasn't working for me as the suspend event fired every time... not sure why. On browser, on mobile, low-battery, full batttery, it always fired.
Below is a snippet which relied on the play() function not working (if the battery was low, for example) and adds the controls UI to the video if it doesn't...
<video id="myVideoID" preload="true" muted playsinline autoplay>
<source src="..." type="video/mp4" >
</video>
const videoElement = document.getElementById('myVideoID');
videoElement.play().then(() => {}).catch((error) => {
videoElement.setAttribute("controls","controls");
});
RcNeil solution worked. There is code for react fix.
You don't need then function, you can just catch the error and show controls.
const videoCurrent = useRef<HTMLVideoElement | null>(null);
useEffect(() => {
if (videoCurrent.current) {
videoCurrent.current.play().catch(() => {
if (videoCurrent.current) videoCurrent.current.controls = true;
});
}
}, []);
...
return (
<video ref={videoCurrent} preload="true" muted playsinline autoplay>
<source src="..." type="video/mp4" >
</video> )
Below is my code in aspx page to allow playing audio's of wav format in the browser but with my current code I am unable to play wav audios in Chrome browser but it works in Firefox. How can I handle this exception?
<script>
window.onload = function () { document.getElementById("audio").play(); }
window.addEventListener("load", function () { document.getElementById("audio").play(); });
</script>
<body>
<audio id='audio' controls autoplay>
<source src="Sounds/DPM317.wav" type="audio/wav" />
Your browser does not support the audio element.
</audio>
</body>
For Chrome they changed autoplay policy, so you can read about here:
var promise = document.querySelector('audio').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
Try using a callback like this with the catch block.
document.getElementById("audio").play().catch(function() {
// do something
});
I don't know if this is still actual for you, but I still leave my comment so maybe it will help somebody else.
I had same issue, and the solution proposed by #dighan on bountysource.com/issues/
solved it for me.
So here is the code that solved my problem:
var media = document.getElementById("YourVideo");
const playPromise = media.play();
if (playPromise !== null){
playPromise.catch(() => { media.play(); })
}
It still throws an error into console, but at least the video is playing :)
All new browser support video to be auto-played with being muted only
so please put
<video autoplay muted="muted" loop id="myVideo">
<source src="https://w.r.glob.net/Coastline-3581.mp4" type="video/mp4">
</video>
Something like this
URL of video should match the SSL status if your site is running with https then video URL should also in https and same for HTTP
adding muted="muted" property to HTML5 tag solved my issue
I am using Chrome version 75.
add the muted property to video tag
<video id="myvid" muted>
then play it using javascript and set muted to false
var myvideo = document.getElementById("myvid");
myvideo.play();
myvideo.muted = false;
edit: need user interaction (at least click anywhere in the page to work)
I second Shobhit Verma, and I have a little note to add : in his post he told that in Chrome (Opera for myself) the players need to be muted in order for the autoplay to succeed... And ironically, if you elevate the volume after load, it will still play...
It's like all those anti-pop-ups mechanic that ignore invisible frame slid into your code...
php-echoed html and javascript is :
10-second setTimeout onLoad of body tag that rises volume to maximum, video with autoplay and muted='muted' (yeah that $muted_code part is = "muted='muted")
echo "<body style='margin-bottom:0pt; margin-top:0pt; margin-left:0pt; margin-right:0pt' onLoad=\"setTimeout(function() {var vid = document.getElementById('hourglass_video'); vid.volume = 1.0;},10000);\">";
echo "<div id='hourglass_container' width='100%' height='100%' align='center' style='text-align:right; vertical-align:bottom'>";
echo "<video autoplay {$muted_code}title=\"!!! Pausing this video will immediately end your turn!!!\" oncontextmenu=\"dont_stop_hourglass(event);\" onPause=\"{$action}\" id='hourglass_video' frameborder='0' style='width:95%; margin-top:28%'>";
In my case I had to wait for a user interaction, so I set a click or touchend listener.
const isMobile = navigator.maxTouchPoints || "ontouchstart" in document.documentElement;
function play(){
audioEl.play()
}
document.body.addEventListener(isMobile ? "touchend" : "click", play, { once: true });
I want this functionality in my website.
The audio should be played automatically for the first 3 visit for a visitor.
For example: If someone visits my website, the audio will be automatically played on each time he loads/refresh the website until his third visit.
<audio id="audio" controls autoplay>
<source src="audio/1.ogg" type="audio/ogg">
<source src="audio/1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Can anybody help?
Make sure you are using the HTML5 audio element, and that it does not have the autoplay attribute set. This should work:
var playCount = localStorage.getItem('playCount') || 0;
if (playCount < 3) {
document.getElementById('audio').play();
localStorage.setItem('playCount', playCount + 1);
}
u may use html5 session storage , to store the number of visit , then u may disable autoplay
if (sessionStorage.visitcount==3) {
var aud = document.getElementById("audio");
aud.autoplay = false;
}
else {
sessionStorage.visitcount += 1;
}
While a video is playing I can't get the HTML5 player to play a different video, I tried changing the source.src but then it doesn't change the actual video to playing a different file.
How do I get the video to actually go to the next video?
This is the part of the code that's not working:
Javascript:
function change(s){
srs=document.getElementById('source');
srs.src="";
srs.src=s;
video.pause();
video.currentTime=0;
video.play();
}
HTML:
<video id='video'>
<source id='source' src="file:///C:/Users/Ruurd/Music/Far%20East%20Movement%20-%20Turn%20Up%20The%20Love%20ft.%20Cover%20Drive.mp3" >
</video>
PS: This doesn't actually have to work online, i just want to make a video/audio player for myself
After you set the src property, call video.load().
Actually, if you're only going to have one single source (presumably, because you know you're going to be using a browser that will play mp3), then you can just simplify and set the src property on the video tag itself.
HTML:
<video id="video" src="file:///C:/Users/Ruurd/Music/Far%20East%20Movement%20-%20Turn%20Up%20The%20Love%20ft.%20Cover%20Drive.mp3"></video>
Javascript:
var video = document.getElementById('video');
function change(s){
video.pause();
video.src = s;
video.load();
video.currentTime = 0;
video.play();
}
I am using video.js to play HTML5 video and I have added the event listener for detecting when the video will be ended. When the video ends I am trying to play next video. It's working fine with other browsers except Chrome and Safari. In both of them the first video is getting played, but the second video isn't.
Below is my code:
<video id="home_video" class="video-js vjs-default-skin"
controls preload="none" width="640" height="264">
<source src="latest.mp4" type='video/mp4'/>
<source src="latest.ogv" type='video/ogg'/>
</video>
<script>
var homePlayer = _V_("home_video");
var myFunc = function () {
var myPlayer = _V_("home_video");
// Do something when the event is fired
alert("hi");
myPlayer.src([
{ type: "video/mp4", src: "latest1.mp4" },
{ type: video/ogg", src: "latest1.ogv" }]);
myPlayer.play();
};
homePlayer.addEvent("ended", myFunc);
</script>
Note: I get the alert in all the browsers but the second video is not being played in Safari and Chrome.