I am using the Ajaxuploader for users to upload videos. Some of them are freezing on playback and I've just realised that it's the FullHD ones. HD plays fine. Is there a way I can force the user to upload in HD only or is there a way to resize on upload? I am using VB.Net for my backend. I'm even trialing a CDN at the moment but it's not making much difference. The video takes a while to start, buffer goes straight up but they still freeze when playing.
<video playsinline ID="videoToPlay" poster="https://www.myurl.co.uk/files/images/videoPoster.jpg" runat="server" object-fit:contain autoplay preload class="videosize" controls>
<source src="vid1.webm" type='video/webm;codecs="vp8, opus"'/>
<source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"'/>
<source src="video/video.mov" type="video/mov"></source>
</video>
videoToPlay.src="https://myurl.b-cdn.net/" & session("video")
Related
I have a video that should autoplay, but it will not.
I had it set up like this:
<video id="video" autoplay muted playsinline loop
poster="http://res.cloudinary.com/situ-live/video/upload/f_auto/Situ-Sizzler-Web-Clip-v05-01_auvu5o.jpg"
#video>
<source
src="http://res.cloudinary.com/situ-live/video/upload/f_auto/Situ-Sizzler-Web-Clip-v05-01_auvu5o.webm"
type="video/webm">
<source
src="http://res.cloudinary.com/situ-live/video/upload/f_auto/Situ-Sizzler-Web-Clip-v05-01_auvu5o.mp4"
type="video/mp4">
<source
src="http://res.cloudinary.com/situ-live/video/upload/f_auto/Situ-Sizzler-Web-Clip-v05-01_auvu5o.ogv"
type="video/ogg">
</video>
As you can see, it's muted so according to this document it should play, but it will not.
I tried to add a function to the canplay method, but when I do that I get this error:
DOMException: play() failed because the user didn't interact with the document first.
which is what lead me to the document above.
Does anyone know how I can solve this?
if you just use the HTML you have in question have in - the video plays just fine.
If you try to force it to play with JS - you'll get this error - as it is a way people try to get around blocking autoplay in the browser. for play() in JS to work, the user must first click somewhere on the page.
by default in newer versions of browsers, because of the user experience and prevention of sudden playing of the video, sometimes autoplay attribute won't work.
you can just fix it by a line of javascript in the page load function:
document.getElementById("video").play();
that's it!
I am using a video background for my website. Which runs fine on all browser on local host. But when I upload it to ipage server, it does not run on IE11. Here is my code.
<video autoplay loop muted class="visible-lg visible-md">
<source src="video/sh.mp4" type='video/mp4" codecs="avc1.4D401E, mp4a.40.2"'>
<source src="video/shanonaction.ogv" type="video/ogg">
</video>
First check your IE version. If it is lower than 9, you need to use the Flash player. You can also used embed in Internet Explorer 8 or lower.
Like this:
<pre>
<video id="Video1" controls width="100%" height="auto" poster="pic.png">
<source src="video.mp4" type='video/mp4;' />
<embed src="video.mp4" wmode="opaque">
<param name="wmode" value="opaque" />
</embed>
</video>
</pre>
It works for me.
This took me a really long time to figure out. No one seemed to know.
The issue is the pixel size of the video.
For some odd reason. Internet Explorer 11 will simply ignore any video whose height is more than around 1000 pixels. so a 1080p html 5 video will not load, but a 720p will.
I have some videos I try to convert with Blender into a format which could be rendered by the most modern Browsers. I tried many different Settings and neither IE nor Firefox was able to decode the files. (Windows Media Player always did.)
I use the following html code:
<video width="320" height="240" controls>
<source src="data/test.avi">
Your browser does not support the video tag.
</video>
Is this correct?
I tried different formats, codecs and reslolutions. (mpeg-4, h.264, ogg, theora).
Do you have any suggestions?
Edit:
Ogg-Theora does run in Firefox and Chrome, but not in IE.
This is and has always been an issue, that is, format "wars" - which format to use, both for audio and video.
Unfortunately (depending on what angle you look at it) there is not one single format to rule them all, so you actually have to provide as many as "possible". By possible at least the three main formats:
MP4
Ogg Video
WebM
You can choose priority by defining the source tag in the order you prefer them to be used:
<video width="320" height="240" controls>
<source src="data/test.mp4" type="video/mpeg" />
<source src="data/test.ogv" type="video/ogg" />
<source src="data/test.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
Hope this gives some input.
I'm trying to get an HTML5 video element to autoplay on a Samsung Smart TV (in the regular browser, not specifically as a TV app, if that makes any difference). Perhaps the autoplay element just doesn't work - I have tried all of the following.
autoplay="true"
autoplay="autoplay"
autoplay=autoplay
The video element will play fine manually (once you have managed to point the cursor on the incredibly tiny play control!)
Has anyone else got this to work?
This should work:
<video id="video" src="movie.mp4" autoplay="autoplay" width="320" height="240">
Your browser does not support the video tag.
</video>
At least the documentation says that:
http://www.samsungdforum.com/upload_files/files/guide/data/html/html_2/reference/HTML%20Specification.html#HTML5%20and%20Samsung%20Smart%20TV%20SDK
If the autoplay attribute won't work, still you can start it using JavaScript. Just try to call the play() method:
var myVideo = document.getElementById("video");
myVideo.load();
myVideo.play();
Trying to get good html5 video on my site. here are the issues and observation, observed locally:
IN Firefox
1. when you pass the mouse over the video, video stutters, audio continues
2. the first video plays the best but not as well as in chrome
3. The 2 other videos don't play well, audio runs but video stutter/stops
In Chrome
1. Poster image visible on video 1, not visible on videos 2 and 3 - u just see the controls
2. video plays well, when you pass the mouse over the video, no stutter...pause and play works well
on all 3 videos...
Perhaps the ogg format is not as smooth as mp4 ? Also, I'm not clear on changes in code required when running more than 1 video on a page. I did add an id, but there is no corresponding css so I'm just not clear on that...
Here is the code I am using:
<video id="vid2" video controls= "controls" preload="metadata" width="640" height="360" poster="video-blog/clarkekoiblog-greenhouse.jpg" tabindex="0">
<source src="video-blog/clarkekoiblog-greenhouse.mp4" type="video/mp4"><!--for chrome,safari-->
<source src="video-blog/clarkekoiblog-greenhouse.ogv" type="video/ogg"><!--for firefox-->
<source src="video-blog/clarkekoiblog-greenhouse.webmvp8.webm" type="video/webm">
<p><em> If you do not see a video here, please refer to the info at the bottom of the page</em></p>
</video>
Looking for comments, a solution whatever to make this work.
THANK YOU