I am implementing a video player using <video>. This is working in Chrome, Firefox, and Internet Explorer but is not working in Safari.
$("#vdsourceVideoPath").attr("src", "http://localhost:3000/Documents/upc and shelf info_0001.mp4");
var player = document.getElementById('vdTrainingVideoPlayer');
player.load();
player.play();
<video id="vdTrainingVideoPlayer" class="vdTrainingVideoPlayer" controls="controls" autoplay="autoplay">
<source id="vdsourceVideoPath" src="" type="video/mp4" />
</video>
player.load() and player.play() method are giving errors in Safari.
You could use the YouTube player
Use the youtube site to find the video you want
Click the 'Share' button below the video
Click the 'Embed' button next to the link they show you
Copy the iframe code given and paste it into the html of your web page.
Check out this link
This article gives a good run through of implementing a html5 video player
http://www.creativebloq.com/html5/build-custom-html5-video-player-9134473
Related
I created a page with a video in the background. It works great on desktop, but when I check it works on iPhone through the "Live Server" visual studio code add-on, it doesn't show the video, but displays the play icon. I tried everything I found on the internet. How can I make it disappear from the page on iPhone and the video starts automatically?
<video type="video/mp4" src="background.mp4" autoplay muted loop playsinline id="vid"></video>
Iphone page test
I tried to start the video with js method video.play(). It didn't work
I want to make the video on HTML autoplays, given that Chrome prevents autoplay attr in HTML to play the video.
Here's my code :
<video id="video" width="400">
<source src="chess.mp4" type="video/mp4">
</video>
var vid = document.getElementById("video");
vid.autoplay = true;
vid.load();
The behavior is weird. First, I'm working on Eclipse and everything works perfectly fine on the eclipse browser.
When it comes to Chrome, the video sometimes works, sometimes need a clear-cache refresh to work... Not working with the first time opening the link. And now it's not working at all...
Any help?
You need to refer to Chrome Autoplay Policy Changes before you try any scripts.
Chrome's autoplay policies are simple:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been
crossed, meaning the user has previously play video with sound.
On mobile, the user has [added the site to their home screen].
Top frames can delegate autoplay permission to their iframes to
allow autoplay with sound
In my case i want to give feasibility to user download mp3 file and it's good working in google crome, but in safari audio tag is working fine but download option is not showing.
html code
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
On Safari 15.3 after fiddling a bit I discovered an option that right-clicking on the middle section of the HTML5 element offers you the menu with action "Download Video as...".
Despite the label, it downloads the audio source of the HTML5 element fine. Note that I tested it only for a wavefile.
I want to play video and audio in autoplay mode, When both are ready to play.
I'm using this code.
var video = false;
var audio = false;
video.addEventListener('canplay',function(){
video = true;
playall();
});
audio.addEventListener('canplay',function(){
audio = true;
playall();
});
playall(){
if(video && audio){
console.log('playing start....');
video.play();
audio.play();
}
}
This code is working fine in desktop browsers. But when I try it on mobile device it is not working.
Here is a link where you can see it live how its working.
Video Link
Chrome/ie now supports the autoplay if muted
<video id="video" width="100%" controls autoplay muted>
<source src="<Your video src>" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Apparently, you can't for now as stated here :
The auto play limitation in mobile browsers is an intentional limitation put in by the OS developers. To my knowledge, there is absolutely no way to auto play content in a mobile browser because the event that is required to trigger content play is an OS/Phone event, one which the browser itself has no control over or interaction with.
HTML5 Video autoplay on Mobile Browser
I have this page
http://joewillhelpyou.com
Users click the blue botton and a video page begins to play.
I have it simple. an iframe so the Jquery dows not mess with my tag that I found would not allow me to autoplay the next video, and 2 src for each video. In all the browswers they work okay, only one video is played back mp4 or webm. but in IE I keep hearing two playing back and I cannot figure out why
you can visit the page and tell me if you catch my mistake or a workaround for IE
<div id="videodiv">
<iframe src="http://joewillhelpyou.com/videos/step2/play02_01.html" width="1000" height="750"></iframe>
</div>
then this leads to a page where I have the video
<video controls autoplay width="936" height="624">
<source src="002_001.mp4" type="video/mp4">
<source src="002_001.webm" type="video/webm">
Your browser does not support the video tag.
</video>
under normal situations the code only plays one choce right? but in IE it seems to play 2 things at once, the rest of the browsers only sound out one track and that is what I want