As can be seen in the Codepen (https://codepen.io/MrKoga/pen/PomGezw), in Safari the video controls trigger a click event on the video element. In Chrome they do not.
HTML
<video id="videoClick" controls width="250">
<source src="https://example.com/media/moviewebm " type="video/webm">
<source src="https://example.com/media/movie.mp4 " type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
JS
document.getElementById("videoClick")
.addEventListener("click", () => console.log("video clicked"))
How do I to prevent this behavior in Safari? Thanks!
Related
I want to check if user has unmuted or muted the video. I am using video html tag.
Is it possible to detect if user has unmuted or muted the video?
You can use Javascript to capture that event.
var video = document.querySelector('video');
video.addEventListener('volumechange', function () {
console.log('muted', video.muted);
}, false);
<video controls autoplay muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
while I am trying to autoplay a song in chrome but it is not working. I tried using JavaScript still getting the same error.
function myFunction() {
var x = document.getElementById("myAudio").autoplay;
document.getElementById("demo").innerHTML = x;
}
myFunction();
<audio id="myAudio" controls autoplay>
<source src="https://www.w3schools.com/tags/horse.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<div id="demo"></div>
In most browsers you can only use autoplay with the muted attribute
See: https://www.w3schools.com/tags/att_audio_autoplay.asp
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
So something like this should work:
<audio id="myAudio" controls autoplay muted>
<source src="horse.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
It is not allowed to autoplay sounds. So it has to be muted. Also with video you have to mute it, otherwise the video is not played. So it will be with audio also. Maybe you have to add a button that says that they have to click it to hear the sound?
I have a simple website I am trying to build. I have a mp4 video (it is a sign no audio)
I want to click the video and have it play an mp3 w/ controls. Just cannot figure out how to do this.
Assume I could use something like this:
<audio controls id="linkAudio">
<source src="demo.ogg" type="audio/ogg">
<source src="demo.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
document.getElementById("link_id").addEventListener("click", function () {
document.getElementById("linkAudio").play();
});
</script>
But where do I reference the video src as the thing to click?
Thanks
You could have the <video> separate and on click event trigger the audio.
document.getElementById("link_id").addEventListener("click", function () {
document.getElementById("linkAudio").play();
});
video{
width: 200px;
display: block;
}
<video src='http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4' id='link_id'></video>
<audio controls id="linkAudio">
<source src="http://www.noiseaddicts.com/samples_1w72b820/29.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
I have video embedded in a webpage.
I would like to let it play inline on the iOS and not expanding to full screen when clicking on the play button.
I've tried
adding webkit-playsinline
<video width="400" controls webkit-playsinline>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
I've tried added in JSFiddle <-- Please View it use your Phone/Tablet
Any hints ?
You have to set the following in Obj C as well.
webview.allowsInlineMediaPlayback = YES;
Your existing attribute is right like below.
<video id="player" width="480" height="320" webkit-playsinline>
Other - Use HTML5 FullScreen API
http://www.sitepoint.com/use-html5-full-screen-api/
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
Below are the Webkit Fullscreen properties to play around.
document.webkitCurrentFullScreenElement
document.webkitCancelFullScreen
document.webkitFullScreenKeyboardInputAllowed
document.webkitIsFullScreen
I succeeded in getting a video to open in fullscreen mode in response to events (click, keypress) using the HTML 5 video tag and jQuery. How do I get the video to open in fullscreen on page load instead of onclick? Any help would be appreciated. Many thanks!
My HTML:
<div id="video_container>
<video id="video1" width="1280" height="720" controls autoplay>
<source src="videos/ballet.mp4" type="video/mp4">
<source src="videos/ballet.webm" type="video/webm">
<source src="videos/ballet.ogv" type="video/ogg">
</video>
</div>
My JavaScript:
$(document).ready(function(){
$('#video1').bind("playing", function(){
var elem = document.getElementById("video1");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
});
$('#video1').bind("ended", function(){
$("#video_container").hide();
});
});
Sounds like you can't make the video fullscreen on page load, at least not for webkit browsers. According to the Safari Developer Library:
The webkitEnterFullscreen() method can be invoked only in response to
a user action, such as clicking a button. You cannot invoke
webkitEnterFullscreen() in response to a load event, for example.
Full article here: https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html