I have just created my new web page and have set up hosting for it. The web page contains a video which should play. However the video just constantly loads and doesn't do anything.
Is this because the video is having to download from the web server?
Here is the code:
<video id="video" width="600" height="400" controls autoplay="autoplay">
<source src="fire.mp4" type="video/mp4" />
</video>
The code works locally with no issues.
Thanks in advance!
If you are getting video in the source directory, you maybe wanna use:
html
<video id="video" width="600" height="400" controls autoplay="autoplay">
<source src="/fire.mp4" type="video/mp4" />
</video>
Yes I added a backslash before fire.mp4 in the source of the source tag, as / is used to get content from root directory.
This of course only works if you have "fire.mp4" in the same directory as your html file.
If it is in a different directory just do this maybe:
html
<video id="video" width="600" height="400" controls autoplay="autoplay">
<source src="/path/to/dir/fire.mp4" type="video/mp4" />
</video>
Related
I use html5 to play video like this.
<video oncontextmenu="return false;" id="videoElementID" width="320" height="240" controls>
<source src="Welcome.mp4" type="video/mp4">
<track src="Welcome.vtt" kind="subtitles" srclang="en" label="English">
</video>
It can protect right click to download but it can download in source code like this.
In udemy it have no video in code like this. How to protect download video in source code to download.
You can't. Because, If somebody is watching your video — he already has it.
These are my code snippets which I've tried but I just get an error message that I need a Plugin
<embed src="eria.mp4" height="50%" width="100%" controls>
You don't need any plugin in HTML5. But the syntax is a bit different:
<video width="100%" height="50%" controls>
<source src="eria.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The <embed> tag defines a container for an external application or interactive content (a plug-in).Simple words it requires a plugin to run external application which is missing from your browser.
Use HTML5 video tag instead
<video height="50%" width="100%" controls>
<source src="eria.mp4" type="video/mp4">
<source src="eria.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
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>