I have used HTML5 for displaying a video. My code is
<video tabindex="0" autobuffer="" poster="" height="380" width="600">
<source src="media/video.mp4" type="video/mp4">
<source src="media/video.webm" type="video/webm">
<source src="media/video.ogg" type="video/ogg">
<img alt="Film Poster" src="" height="380" width="600">
</video>
But this is not displaying in safari browser...
What is the problem?
Try changing the .ogg file extension to .ogv (both actual file and in the html sources)
Take a look at some of the answers here
Related
I am new to web programming. I have a question. why do the audio and videos from the background start downloading automatically(download dialog pops up from IDM) when my index.html page opens? I am using Aframe's videosphere in the background.
<video id="video2" loop="true" autoplay src="/vid/waterfall.mp4"></video>
<a-videosphere id="video-360" src="#video2"></a-videosphere>
Thank you.
This May Help You. preload='none' prevent pre download
<video preload='none'
id="video2"
loop="true"
autoplay src="/vid/waterfall.mp4">
</video>
<a-videosphere
id="video-360" src="#video2">
For Audio
<audio preload="none">
<source src="audio.mp3" type="audio/mpeg" />
Audio Type
</audio>
I'm working on Vue (Laravel) I need to set a different file depending on the browser. I have 2 different video files and a GIF file and I need to set them for different Browsers.
This is my code for the videos (to set only for Chrome and Mozilla):
<video class="img-fluid" width="500px" height="438px" autoplay muted playsinline>
<source src="/image/animation.mp4" type="video/mp4">
<source src="/image/animation.webm" type="video/webm">
</video>
This is my code for the gif (to set only for Safari):
<img height="500px" width="438px" class="img-fluid" src="/image/animation.gif">
Any idea?
I have a website with a background video. Many browsers especially mobile ones dont support autoplay even with muted videos. How can i detect if the browser isnt supporting autoplay and replace the video with an image. Im using vueJS.
<video autoplay class="background-video" loop muted> <source src="#/assets/video/background.mp4" type="video/mp4"> </video>
Use the poster attribute:
<video width="620" loop muted poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" >
<source
src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
type="video/mp4">
<source
src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
type="video/ogg">
<source
src="https://archive.org/download/ElephantsDream/ed_hd.avi"
type="video/avi">
</video>
source
Example with no video
Add the playsinline attribute for your video to autoplay on iOS.
(Most browsers support autoplay, as long as you also use muted.)
I am rendering audio or video files on my html page. I have tried for HTML5 tags but 3gp, 3gpp video or aac, amr audio files are not supported by HTML5. I have tried following code but some how I am not able to get the video playing on my website.
<object type="application/x-shockwave-flash" data="https://localhost/images/Sachin.mp4" width="550" height="400" >
<param name="movie" value="https://localhost/images/Sachin.mp4"/>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<!-- <video width="320" height="240" controls src="https://localhost/images/Video12.webm"> </video> -->
<img src="https://localhost/images/Video12.webm" alt="Get Adobe Flash player"/>
<video id="video" controls>
<source src="https://localhost/images/Sachin.mp4" type="video/mp4">
</video>
</a>
<!--[if !IE]>-->
</object>
Did you use the source element? If you want to support Modern browsers, I would suggest using webm but for IE, you'll have to install the webm component.
E.G.
<video controls>
<source src="somevideo.webm" type="video/webm">
</video>
I need to play a video in my web page. I used following code for test it. Result display player but won't play the video. I used updated chrome as my web browser.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<video controls=controls>
<source src = "q.mp4" type="video/mp4"/>
</video>
</body>
</html>
Note- my video and the web page is contain in same folder.
I change the source as following
<video width="400" height="300" controls>
<source src="video.m4v" type="video/mp4">
<source src="video.webm" type="video/webm" />
<source src="video.ogg" type="video/ogg" />
</video>
Now webm file plays in my waterfox browser but same result on chrome and IE
Try providing appropriate codecs for all the video files. Like this:
<video width="400" height="360" controls>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
Your browser does not support the video tag.
</video>
There are two ways you can do this
use a J query Plugin Like video.js or go with HTML5
here's the link
Playing video is tricky, you can try this
<video width="400" height="300" controls>
<source src="q.mp4" type="video/mp4">
<object data="q.mp4" width="400" height="300">
</object>
</video>
The encoding of your mp4 file might not be supported by chrome
chrome could play html5 mp4 video but html5test said chrome did not support mp4 video codec
If above doesn't work you can try flowplayer It will try to play the video with html5 first then fall back to flash player.