I am trying to play a mp4 video on my HTML page, I have searched the web and found that in HTML5 I can do this with video tag like this below
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
</video>
Issue I am facing
My main issue is my video is stored in my local computer in some location, So how can I call that from that path
In my system it is located in D drive so I want to call it from there
I am new to this so I don't know if I am doing it the right way; is my approach correct?
My requirement is to auto-play video on my web page
I am doing like this
<video width="320" height="240" autoplay>
<source src="D:\Video\samplevideo.mp4" type="video/mp4">
</video>
D:\Video\samplevideo.mp4 is the path of my file and samplevideo.mp4 is the name of the video
On Chrome it show error Not allowed to load local resource: file:///D:/Video/samplevideo.mp4
And on Firefox All candidate resources failed to load. Media load paused.
Edit
My main focus is to play video on webpage.
I need to play a video on the web (HTML page) when page is loaded I have that video in my system at D:\Video\samplevideo.mp4 this path, how can I play that video when page is loaded.
Try this Code
<video muted autoplay loop class="video video js-video" id="hero-vid" poster="video/desktop-screen-banner.png">
<source src="video/movie.webm" type="video/webm">
<source src="video/movie.mp4" type="video/mp4">
<source src="video/movie.ogg" type="video/ogg">
</video>
I can give you some pieces of advice.First,you can use the absolute path about video,place the video file on the server,then you can get a path such as www.xxx.com/movie.mp4,and you can write the code on your HTML page,like this:
<video width="320" height="240" autoplay>
<source src="www.xxx.com/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Second,you can place your video file on the directory as same as the HTML page location.For example,if your HTML page in the directory which called test.you can create a directory which called src,and you can write the code on your HTML page,like this:
<video width="320" height="240" autoplay>
<source src="./src/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Third,you can use the input tag to upload the local video file,the HTML code as below:
<input type="file" id="myInput"/>
<video controls autoplay></video>
the js code as below:
var input = document.getElementById('myInput'),
video = document.getElementById('myVideo');
input.onchange = function () {
var file = this.files[0];
var url = URL.createObjectURL(file);
video.innerHTML = '<source src="' + url + '" type="video/mp4">';
}
Fourth,use the object tag.you can write the code,like this:
//the HTML code
<div id="playhere"></div>
//js code
function play(fn){
var str='<object id="MediaPlayer" height="300" classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6" style="width:70%"><param name="URL" value=\''+fn+'\'\/><param name="autoStart" value="1"\/><param name="balance" value="0"\/><param name="baseURL" value=""\/><param name="currentPosition" value="0"\/><param name="currentMarker" value="0"\/><param name="defaultFrame" value=""\/><param name="enabled" value="1"\/><param name="enableErrorDialogs" value="0"\/><param name="enableContextMenu" value="0"\/><param name="fullScreen" value="0"\/><param name="invokeURLs" value="1"\/><param name="mute" value="0"\/><param name="playCount" value="1"\/><param name="rate" value="1"\/><param name="stretchToFit" value="0"\/><param name="uiMode" value="full"\/><param name="volume" value="100"\/><param name="windowlessVideo" value="1"\/><\/object>';
document.getElementById('playhere').innerHTML=str;
}
// that's your video file location
play('D:\\Video\\samplevideo.mp4')
but that way isn't supported on chrome browser.
Excuse me,I'm new to speak English.
Can you try this
<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>
Also follow this link for more info.
http://mrbool.com/how-to-add-and-play-videos-in-html/26171
For the very basics of getting this working move D:/Video/samplevideo.mp4 to the same location as your html file.
Then change your code to:
<video width="320" height="240" autoplay>
<source src="samplevideo.mp4" type="video/mp4">
</video>
Make sure Tomcat is set up to server the .mp4 mimetype or extention.
Next you should read up on how paths work in HTML.
you need to put an alternative text like this to check of your browser or smartphone supports video autoplay.
like this:
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
```
I am using the code snippet from video for everybody to embed a video in my site. The snippet basically guarantees more or less that the user will be able to see the video from any device. Here is my html:
<div class="intermitent-video-container">
<video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="100%" height="100%">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}" />
<img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
</object>
</video>
</div>
To control the sizing & aspect ratio of this video for responsive layout I have the following Javascript:
function resizeVideo() {
var videoWidth = jQuery(".intermitent-video-container").width();
var videoHeight = videoWidth * 0.666;
jQuery(".intermitent-video-container").css('height',videoHeight);
};
resizeVideo();
jQuery(window).resize(resizeVideo);
The snippet above works exactly as I want except for when the video fallback goes to the flash version of the video. When I load the page in Safari 5.1.7 which uses flash for example the video will size exactly how I want it using the code snippet above on load but not on window resize. Is this a limitation to flash or am I doing something wrong?
Adding css for video tag
video{
width: 100%;
height: auto;
}
And you absolutely sure intermitent-video-container have responsive.
Note: Dont forget <meta name="viewport" content="width=device-width, initial-scale=1">in your head HTML
I try add subttitle in video html5 with videosub.js
http://www.storiesinflight.com/js_videosub/
It work with file in same folder but not work with url stream !
Subttitle not word with this code
<video id="my_video" width="100%" height="100%" autoplay="" >
<source src="https://xmovies8.org/get_video?token=Xe-QdFvRw5e-6BEHzLTDguxNlJ5CW-mqdGyvtmNZ4GBGWVuHFrzPSoDtYJcG2z8XeIMOJ3GB7m7mz0m7-kVD6Abo5WJhrTsgUXlS2kQhRs-2-NCc9lzsPT6iNiKElzmAvPs5tlC6CQHrL9GgtTVSZ-46OELzd6rfI5pCbQOoZzEC6DTMSXpToY3MFAOzIsqadILaa3SYAwFSmjzirfTWtRXVcum7dpwbfY-IB6eV7oBzffJKJXUqeNi77NIejTky1IAH1bA3eByjWmE8ob4Odsfz8Otmkp4cAT1K9CVv-XgKVCZkMruxVO5-3ZoGQQ2hS8jDK-cdXCre4Vtux-JC9ymHxHCzue_95gPGdZTvPusUYCFUEngdfQZqssU82vK_8SdjgASmKx1EhUpgOrXMgLHidi1YC0hfZU58MZssFLt8l_pRkQAJU40pBJZYPtY_ii58sA5tDsDTS_inspRH7A" type="video/mp4" />
<track label="English" kind="subtitles" srclang="en" src="http://phim.dinhvanvu.com/wp-content/uploads/2015/07/Demo.srt" default></track>
</video>
But it work with
<video id="my_video" width="100%" height="100%" autoplay="" >
<source src="https://xmovies8.org/get_video?token=Xe-QdFvRw5e-6BEHzLTDguxNlJ5CW-mqdGyvtmNZ4GBGWVuHFrzPSoDtYJcG2z8XeIMOJ3GB7m7mz0m7-kVD6Abo5WJhrTsgUXlS2kQhRs-2-NCc9lzsPT6iNiKElzmAvPs5tlC6CQHrL9GgtTVSZ-46OELzd6rfI5pCbQOoZzEC6DTMSXpToY3MFAOzIsqadILaa3SYAwFSmjzirfTWtRXVcum7dpwbfY-IB6eV7oBzffJKJXUqeNi77NIejTky1IAH1bA3eByjWmE8ob4Odsfz8Otmkp4cAT1K9CVv-XgKVCZkMruxVO5-3ZoGQQ2hS8jDK-cdXCre4Vtux-JC9ymHxHCzue_95gPGdZTvPusUYCFUEngdfQZqssU82vK_8SdjgASmKx1EhUpgOrXMgLHidi1YC0hfZU58MZssFLt8l_pRkQAJU40pBJZYPtY_ii58sA5tDsDTS_inspRH7A" type="video/mp4" />
<track label="English" kind="subtitles" srclang="en" src="sub/je2.srt" default></track>
</video>
<video id="my_video" height="100%" width="100%" crossorigin="anonymous"></video>
This is because CORS limitation.
Use crossorigin="anonymous" in video tag.
if the above code didn't work, then there is no way to load the subtitle from that server.
Hope it will works for you. :)
I want to include the media player in the web page with streaming radio. But i cannot find any one for that what i can do??
I use the html5 audio player but it cannot supported for all browser.
<audio controls>
<source src="<?php echo base_url(); ?>images/horse.mp3" type="audio/mpeg"/>
<object type="application/x-shockwave-flash" data="media/OriginalMusicPlayer.swf" width="225" height="86">
<param name="movie" value="media/OriginalMusicPlayer.swf"/>
<param name="FlashVars" value="mediaPath=<?php echo base_url(); ?>images/horse.mp3" />
</object>
</audio>
I want to create a video player which is able to play these video files:
'mpg':
'mov':
'wmv':
'rm':
'3g2':
'3gp':
'm4v':
'mp4':
'asf':
'asx':
'avi':
'flv':
'srt':
'swf':
'vob':
The videos will be used in an online exam as some questions may require watching a video for information. The video needs to work on all major browsers. Be able to work on computer or ipad.
My question is what is the best way for me to create a html video player?
Do I go for the HTML5 + object + embed method (sample):
<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>
To include the other file types do I just include more <embed> tags to support those files?
Or is the best way by using the Youtube player which is this:
IFRAME:
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
OR
SHOCKWAVE:
<embed
width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed>
I saw this example on SO as well but not sure if it is good to use or not:
<object id='tempVid1' name="emQTPlayer" height="240px"
width="320px" style="behavior: url(#BinaryBehaviorID)"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="autoplay" value="false" />
<param name="src"
value="" />
<param name="controller" value="true" />
<param name="type" value="video/quicktime" />
<param name="align" value="bottom" />
<param name="border" value="0" />
<param name="scale" value="tofit" />
<%-- <param name="wmode" value="transparent">--%>
<param name="showcontrols" value="true">
<embed id='tempVid2' name="emQTPlayer" type="video/quicktime"
autoplay="false" height="auto" width="auto" align="top"
border="0" controller="true" postdomevents="true"
pluginspage="http://www.apple.com/quicktime/download/"
showcontrols="true" scale="tofit"
src='' />
</object>
MORE INFO here: http://www.w3schools.com/html/html_videos.asp
Most of the formats in your list wont work on all platforms. Some will require plugins that are only available on particular platforms.
You will need to convert to h.264 mp4 files + one other (ogg or webm, unless you can use flash to play the mp4 files).
You can do this yourself, or use something like Zencoder to do it for you.