I've used the HTML5 tags to create an audio player to play a live stream. This plays the stream perfectly however I'd like to reszie the player. I have tried adding width="XXX" height="XX" to it and it makes no difference.
I really want to use HTML5 for this. Is there any way to fix this?
(Browser Safari)
Try the following
<audio tabindex="0" controls="" preload="" id="player1">
<source src="http://terrillthompson.com/music/audio/smallf.mp3" type="audio/mpeg"></source>
<source src="http://terrillthompson.com/music/audio/smallf.ogg" type="audio/ogg"></source>
Your browser does not support HTML5 audio.
</audio>
My first try I was getting the resize too, this seems to fix the issue when starting to play it. If the user "seeks" it still wants to resize...aww crackers XD
It seems to resize because of the (controls="") if we could add an event listener for ("onseeking") and some how reset "controls" back to "blank" that may do it...just an idea at this point, im unsure how to test.
Something like this may help/work
var audio = this.audio;
audio.addEventListener('seeking', function() {
finish(somehowresetcontrolstoblank);
}, false);
Hopefully this gives someone an idea they can run with :)
Sorry I can only answer half the question
Related
I have a code like this but the video does not autoplay when the page is opened.I will be glad if you help
Assuming that you are using chrome to test, use muted keyword before autoplay word.
There is a change in security policy for chrome which disable playing video with sound automatically. You may read policy here
As RABI described, the browsers (not only Chrome) are disabling auto-play of videos with sound. There are lots of workarounds that try to bypass such an annoyance, but every single one that I tried failed. Fundamentally, what worked for me was a simple VIDEO HTML 5 tag with a small JavaScript mixing jQuery and Vanilla JS. Somehow this "little Frankenstein" seems to satisfy the browser's policies, probably because there are more than two indirect actions against the video object, which is enough to confuse the browser policy to allow the video to be played from the JavaScript request WITH sound, hence: fully functional autoplay.
<video id='myvideo' width="700" height="400" preload controls disablePictureInPicture controlsList="nodownload">
<source type="video/mp4">
</video>
<script>
$(document).ready(function () {
$("#myvideo > source").attr("src", "VIDEO_URL");
var autoPlayVideo = document.getElementById("myvideo");
autoPlayVideo.load();
});
</script>
Tip: I would have used your code sample, Levin Rave, IF it was not an image. Next time, try posting the code snippet so we can have something to work with. However, it should be fairly simple to adapt my example to your code. Let me know if you can make it work.
Important: Don't forget to load jQuery in the header of your page.
<embed name="audioforwebsite" src="audiofile1.mp3" type="audio/mp3"
autostart="false" Hidden="true" ></embed>
<audio loop autoplay>
<source src="audiofile1.mp3" type="audio/mp3">
I use this code and it used to work on my website. However for some reason, it doesn't work anymore.
(i use chrome to play it)
i'm very new to coding and i've looked around the internet for the past hour, but none of the advice seem to work.
my objective is to create an audio file that auto plays when you get into the website, it loops, and it cant be seen in the form of a play/pause button thingy.
help me please.
if you dont know how to fix it, please tell me how to make a new one that you know works using HTML chrome. Thanks.
Auto Play in Chrome ist disabled for security reasons. The user has to click in your page or do anything.
In our website coverr.co we offer free stock videos for any commercial use.
One of the coolest things in Coverr is allowing our users to see the video running as a background video in our site. As an example: https://coverr.co/videos/Beach
If you'll access this page using FF or Safari the video will autoplay, no problem. However since Chrome's latest policy change on April 2018, autoplay has been inconsistant on Chrome.
We've added the "autoplay" and "muted" flags (although all of our video footage is sound-less), as required by the new spec, but with no luck. It would sometimes play and sometimes just stay frozen until the user actively start playback.
Can someone please help us solve this mystery?
Thanks in advance!
(1) Cannot reproduce your issue (on Chrome version 69.0.3497.100):
This autoplays and loops correctly:
<!DOCTYPE html>
<html>
<body>
<video width="100%" autoplay loop>
<source src="https://storage.googleapis.com/coverr-main/mp4/Beach.mp4" type="video/mp4">
</video>
</body>
</html>
(2) Your cover/poster image is blocking the video (which may be playing underneath).
Try removing the cover image. Your frozen frame (not playing) is actually the poster image. Test by removing cover image code (eg: <div class="poster hidden"> and related).
PS: If you right click poster image and choose "show controls", the displayed "play" button will start playback.
Found the problem, and it was related to the fact we've used angular 2.
Apparently Angular 2 has a problem to add the muted meta tag properly.
The full answer can be found here, but basically you need to use Angular's onloadedmetadata attribute:
onloadedmetadata="this.muted = true"
and in general, this is how it should look like:
<video onloadedmetadata="this.muted=true" autoplay>
<source src="myVideo.mp4" type="video/mp4" />
</video>
Important comment:
We've also added oncanplay="this.play()" for additional playback robustness.
So in the future we can handle play() promise and show play button if autoplay was rejected by some another reason
Additional important comment:
Following #VC.One's question, just wanted to clarify that there is a way to verify or at least get notified of playback (taken from the article in my question):
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
but it doesn't make sure that the video actually plays, and so you might get and error even though everything is legit. And of course, adding a play button can work, but it really takes out the "sting" of what we're trying to do - autoplay a muted video in the site's background.
Basically all you need it to have both autoplay and muted injected properly, and apparently in Angular 2 it's not such a trivial task...
I have following problem. I have embedded video on my page:
<video id="video_1" width="520" height="360" controls="controls">
<source src="http://patho/to/video.mp4" type="video/mp4" />
</video>
When i open my page i see black box. After 4-5sec play icon is being displayed.
Is it possible to see this play icon immediately ? I tried to do a progress bar or something and checked all media events -> http://dev.w3.org/html5/spec/single-page.html#mediaevents .
But it looks like this problem is not connected with my video but with quick time which need time to be loaded. Am i right ? Or there is a workaround for this ?
One thing i can do is to initialize video earlier and then just show it via js ...
Take a look at this document about preloading? If your file is huge sized, then nothing could be done.
PS: IOS has own way of playing html5 video, is hardware accelerated and displayed above browser by system hack. That's why I think there is nothing that could be done.
what you can do is use the poster setting of the video tag:
<video poster="http://link.to/poster.png">
<source ... />
</video>
this should lead to the image being displayed immediately after download of it,
then download the play button once the player and the vid are loaded.
have fun,
jascha
It sounds like the index is at the end of the file: How to get your HTML5 MP4 video file to play before being fully downloaded.
Is there a ready to use code or some sort to enable the fullscreen button on Safari for the ?video? Currently when the video is loaded, and click on it doesnt work.
<video width="320" height="240" controls="controls" name="media" src="urlvideo">Text</video>
What types are supported for the video tag?
Do i need to use type=audio/mp3 for playing mp3 and type=audio/wav etc....?
By they way, the video ui looks different on each browser or not working at all... is there a way to have them all the same look and feel and have them all work on all browsers?
purely css, you can target it with video::-webkit-media-controls-fullscreen-button{}, and you'll want to reference this http://codesearch.google.com/codesearch/p#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/css/mediaControls.css
To play video when user clicks on it:
document.querySelctor('video').addEvenetListenr('click', function(){
this.play()
}, false);
To have fullscreen use Webkit and Gecko full screen API
First, not all browsers have the same video codecs, so not all browsers can play the same videos. I would suggest looking here to choose a format that is supported by the browsers you are targeting:
HTML5 Video Codec Support By Browser
For Safari specifically, I have gotten this JavaScript to work to get a video to play fullscreen:
var vid = document.getElementById('video');
vid.webkitEnterFullscreen();
vid.play();
Also, check out this thread: Web App - iPad webkitEnterFullscreen - Programatically going full-screen video
Hope that helps!