I am developing a Typo3 site and have installed "html5videoplayer" extension. Then I added the videos in MP4, .ogg and webm format, as this should cover all the browsers and also iPhone/iPad. However, it worked on iPhone/iPAD, and also chrome, opera, firefox and IE, but just wont work on SAFARI!
Here is the html:
<div class="video-js-box ">
<video id="video_1" class="video-js " width="960" height="450" data-setup="{}" controls="" autoplay="" preload="auto" tabindex="0">
<source type="video/mp4" src="fileadmin/Videos/Canebio_Korr.mp4"></source>
<source type="video/webm" src="fileadmin/Videos/canebio_mobile.webm"></source>
<source type="video/ogg" src="fileadmin/Videos/Canebio_Korr.ogg"></source>
</video>
<p class="vjs-no-video"> </p>
</div>
Any suggestion, ideas will be highly appreciated. You can also view the site at http://tinyurl.com/c7gunen
Thank you
Did the server send the files with a correct mime type?
.htacces in the folder with the video files:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Related
I am using videojs : http://videojs.com/
Can you guys please help me if I can play audio files using videojs library.
Example
<audio id="audio_example" class="video-js vjs-default-skin" controls preload="auto"
width="600" height="600" poster="/img/awesome-album-art.png" data-setup='{}'>
<source src="/audio/awesome-music.mp3" type='audio/mp3'/>
</audio>
I am working on a JS/HTML5 application that has to show the same video in two different places of the screen.
I can use any web browser I want - currently I am with Chrome.
Is it possible to display same video in two different places of the screen, or do I need to setup two different streaming sessions and take care of keeping them in sync?
Yes you can use same video src for two video players in the same page
<video width="320" height="240" controls="controls" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<video width="320" height="240" controls="controls" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
For video player options below is the url
http://www.w3schools.com/tags/tag_video.asp
and you can test the example
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_autoplay
HTML
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<video width="320" height="240" controls="controls" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
replace the html in w3schools Tryit Editor
I am using video.js to implement the video and the following code:
.htaccess:
AddType text/x-component .htc
AddType video/mp4 .mp4 .m4v
AddType video/webm .webm
AddType video/ogg .ogv .ogg
HTML:
<video id="video-1" class="video-js vjs-default-skin"
width="100%" height="100%"
poster="videos/timelapse.jpg"
data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'>
<source src="videos/timelapse.mp4" type='video/mp4' />
<source src="videos/timelapse.webm" type='video/webm' />
<source src="videos/timelapse.ogv" type='video/ogg' />
Your browser doesn't support HTML5 video.
Download the video instead.
</video>
I get the following error in chrome:
["Video Error", Object]
0: "Video Error"
1: Object
length: 2
__proto__: Array[0]
However if i change the order of the formats and put the .webm first it works in chrome but not in firefox.
Any ideas? thanks!
Using mp4 and ogg is enough, and should work on ie9+, opera 10.6+, chrome 6+, firefox 3.6+ and safari 5+.
<source src="videos/timelapse.mp4" type="video/mp4">
<source src="videos/timelapse.ogg" type="video/ogg">
I have this player:
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<video id="milokan" class="video-js vjs-default-skin" controls preload="auto" width="640" height="480" autoplay data-setup="{}">
<source src="play.php?file=<?php echo $code; ?>" type='video/mp4'>
</video>
AND play.php plays header("Content-Type: video/mp4");
This way there is no buffer, the player works but just when the whole file is done downloading.
How can I make it work and keep hiding the file I'm playing ?
Make sure you send the following headers in your response when serving up the video file:
Accept-Ranges: bytes
Content-Length: 22474866 // (example)
Content-Range: bytes 539490-23014355/23014356 // (example)
Content-Type: video/mp4 // (example)
And make sure that you can serve files starting at a certain byte offset if the client requests that. This is required for seeking to work in HTML5 video/audio.
I'm trying to embed a video on my website:
<video width="320" height="240" controls="controls">
<source src="new-slideshow.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
For some reason, the video is not loading, and I can see this information when I inspect the network request:
https://dl.dropbox.com/u/2241201/locker/Screen%20Shot%202012-11-14%20at%201.49.39%20PM.png
Why is the video being canceled?