I am using html video player. I want to show control bar always ..currently it shows on hover but i want it should be display always not only on hover.
Include the controls attribute to the video player
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
For me adding the control tag always shows the controls in Chrome. Are you using other browser like Safari?
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Related
I am trying to use a video with sound in the video tag but the sound is not playing when I run it in browser ,if I remove the muted attribute video doesn't play .The video directly works in browser if you open the link.Please help
<div class="background-wrap">
<video preload="auto" autoplay="true" loop="loop" muted>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type="video/mp4"> </video>
</div>
I have an HTML5 video tag on a home page of a website. But when I check the website on browsers like chrome and firefox, the video is freezing even though it is set to autoplay.
Video tag code:
<div class="video-container fullscreen fixed video-container-overlay hide-on-mobile">
<video muted="muted" autoplay preload loop>
<source src="my_video.mp4" type="video/mp4" />
<source src="my_video.mp4" type="video/ogg" />
</video>
</div>
Any help is appreciated. Thanks.
I need to play a video inside an HTML file and then inside a Joomla article (first want to try in a single HTML page).
I am using this code:
<video width="500" height="250" controls autoplay>
<source src="videos/video.wmv" type="video/ogg">
<source src="videos/video.wmv" type="video/mp4">
<object data="videos/video.wmv" width="500" height="250">
<embed width="500" height="250" src="videos/video.wmv"> </object>
</video>
I tried downloading a video from Youtube, and it works fine on Chrome and FF, but not on Opera.
However, the main issue - I have an avi (230MB) that I need to play. How could I do it? Convert it to an .wmv/.mp4? Or can I play it as an avi without external plug ins?
I tried renaming it from .avi to .wmv, tried online converters but it still doesn't work.
Could the problem be the size? The format?
I usually have four versions of the same video for cross-browser
compatibly:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.flv" width="320" height="240">
</object>
</video>
.mp4, .webm, .ogv, and a flash fallback .flv. This has worked
well for me cross-browser. Another thing to note is that for mobile, a
higher-optimised .mp4 video is more likely to work (I've had issues
with this in the past).
Source: Making video tag play in all browsers
did you tried Video.js? It's open-source and cool.
In the <head>:
<link href="http://vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.3/video.js"></script>
<style type="text/css">
.vjs-default-skin .vjs-control-bar { font-size: 60% }
</style>
In the <body>:
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
<source src="my_video.mp4" type='video/mp4'>
<source src="my_video.webm" type='video/webm'>
</video>
Here you could find more.
I'm developing a site in which i will show youtube videos to the user,
Steps:
1)i'll upload video urls to Database (manually i'll enter url into database.)
2)using that url i want to show a default image in my site
3)if user clicks on that url video will play.
is it possible to do this without youtube api ?
YouTube video has 4 images by default provided by youtube
http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg
Display those images and when user clicks on it show the video
w3schools have a tutorial section on how to do this with basic HTML; javascript isn't required:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
http://www.w3schools.com/html/html_videos.asp
I tried the following HTML for displaying a video. But I am not able to see video.
Its only loading the video, but not playing it. I'm using 'video.js' a JavaScript and CSS library which manipulates the video tag for a consistent UI.
If I am missing something please tell me.
Here is my code:
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}" >
<source src="scroll_index.mp4" type='video/mp4'>
<source src="scroll_index.webm" type='video/webm'>
</video>
I have included above code in body tag and also included references to video.js and video.css in the head tag.
I don't know what browser you are testing with, perhaps it doesn't support the html5 video tag, but regarding your comment, I don't think so :)
However, you have neither set the controls attribute to make the control panel appear so user can manually start (and control) the video, nor set the autoplay attribute so that the video will play as soon as it is ready, so I suggest adding these attributes:
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
autoplay="autoplay" controls="controls"
data-setup="{}">
<source src="scroll_index.mp4" type='video/mp4'>
<source src="scroll_index.webm" type='video/webm'>
</video>