I'm trying to add video to a portfolio site I'm working on, but it has this choppy quality to it, like it's lacking anti-aliasing.
Or it could be something else.. Does anybody have any clues?
It looks fine when I play it in a video player.
(Open the image in full view to see artifacts better)
Here's the code for the video tag:
<video width="100%" class="videoStyle" autoplay muted loop>
<source src="video/01-02.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
Related
I have a short video that should autoplay in Chrome. I've read plenty about this problem and tried a lot of solutions. Presently my code to play the video is
<video autoplay="true" playsinline muted >
<source src="assets/video/somevideo.webm" type="video/webm" />
</video>
This plays the video, but in an apparently random way. Sometimes the video starts, sometimes not, showing a white screen instead.
The video format is compatible with Chrome ('sometimes' it starts correctly!). The html attributes should be correct, taking into account the limitation of chrome in playing not muted videos.
What could be the problem and how can I play the video, being sure it will always be played?
On my wordpress site, when adding a video via the standard HTML Video tag, and then adding autoplay to it - when i then reload the page it sure autoplays but after a few seconds another instance starts the audio and then the audios are overlapping each other. How can i prevent this? This is my simple code.
<video width="400" controls autoplay>
<source src="/uploads/2018/04/ML_video-converted-with-Clipchamp.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Whats going on here?
I am trying to make a video my background, which will loop. It works perfectly on PC, but once I test it on mobile (IOS) it doesn't appear.
I've tried putting playsinline and making the the video path absolute, but it it still doesn't work on mobile.
HTML
<video autoplay muted loop playsinline id="myVideo">
<source src="vhs.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Note: What could be an alternative to having a video be the background?
I initially wanted the same video, but in .gif format. However, it was not nice.
I just finished reading this article on why autoplaying video is bad http://www.punkchip.com/autoplay-is-bad-for-all-users/. I knew autoplaying was a bad practice but this video gave me good, tangible reasons why its not a best practice.
My question, sites like YouTube, KickStarter and ProductHunt DO have autoplaying video, the catch is the audio is muted.
I'm working on a site for a client now, more specifically a page in which the client might request the video be autoplayed. Obviously this behavior would not be acceptable on with sound, but how about if I muted the sound by default and provided a volume button like ProductHunt?
And just replaced the video with a poster image on mobile? Thoughts?
Thanks.
If you will be using the HTML5 player native to the browser. HTML5 video does provide the ability to mute a video and autoplay it. You simply have to include the 'muted' and 'autoplay' properties in your video tags in addition to the 'controls' property so that users have the ability to play,pause, unmute etc, as an example, the code would look like this:
<html>
<body>
<video width="320" height="240" autoplay controls muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<p><strong>Note:</strong> The muted attribute of the video tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
I am using jquery mobile and video tag to display videos.
My video plays fine on all 'desktop' browsers, but when play when I use the following code in mobile safari (iPhone) it shows only black rectangle without any controls.
I used video used commonly in html5 examples. (from http://www.bigbuckbunny.org) so it shouldn't be encoding issue.
When I access video directly by typing its url http://myurlofvideo.mp4 it plays correctly in mobile Safari.
What's causing the problem?
Thank you in advance!
<video width="75%" id="video1" controls="true" autoplay="true">
<source src="videos/mov_bbb.mp4" type="video/mp4">
<source src="videos/mov_bbb.webm" type="video/webm">
Your browser does not support the video tag.
</video>
I tried the sample below in iphone simulator and it is working ,check it out .
<video width="320" height="240" controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
it shows preview image of the video,when you click on it plays in fullscreen.