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.
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>
My code roughly looks like <video src={URL.createObjectURL(videoFile)} /> where videoFile is a local file from a file input. I have .mov files created from a Quicktime screen recording and the video tag will play the video and audio part of the file, but when I AirDrop a video recording from my iPhone (.MOV file) and try to play them, only the audio plays and the video tag is a black screen. There's something about iPhone video recordings that makes the video tag not play the video and only the audio.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
<source src="video.ogv" type="video/mov">
</video>
here width and height depends on your requirements
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>
The video is intended to autoplay but it is making the slider not appear at all... it breaks it... It works only on safari but not on chrome or firefox
<video id="video1" width="945" height="600" controls>
<source src="http://fistart.org/videos/FistArt.mp4" type="video/mp4">
Your browser does not support the video.
</video>
<script>
var myVideo=document.getElementById("video1");
myVideo.onloadeddata=myVideo.play();
</script>
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