I have a company training video loaded onto a local server. I'm using HTML5's video playback to view these videos. This server can not access the web, but I have loaded apache and port 8080 is open to all machines on the same network.
The files sit in /var/www/html/Videos/An_Industry_Overview
The html file is test2.htm
The video files sit in the same directory.
My current code is as follows
<html>
<body>
<div style="text-align:center">
<video id="video1" width="720" controls>
<source src="overview.mp4" type="video/mp4">
<source src="overview.ogv" type="video/ogv">
<source src="overview.webm" type="video/webm">
</video>
</div>
</body>
</html>
The player itself loads, and it acts like it's loading the video (loading circle going around and around), but that's all it does. I also tried inserting the full http url and also subbing out the server name with the localhost ip 127.0.0.1 but I get the same results. Why can't I get it to load?
EDIT:
Default .htaccess and httpd.conf files. Added video file types to /etc/mime.types. Tested in both Chrome and Firefox.
Check the case on the src, and change it to a fully qualified URL.
Related
I'm trying to embed a local video file that I have stored on my raspberry pi onto a locally hosted apache webserver that I also have on my raspberry pi.
I've tried multiple solutions, including the ones here and here, but none of them have worked; there isn't even an error message, there's just nothing where the video is supposed to be, unless I have the 'controls' parameter enabled in which case there's just a black box with the video controls on it. Something of note is that videos do show up when I use youtube's embedding code.
Here's my current code:
<video width="420" height="340" autoplay>
<source src="file:///home/pi/test.webm" type="video/webm">
</video>
What exactly am I doing wrong here?
Im trying to play mp3 files from an external hard drive connected to raspberry pi on web browser (webserver is the raspberry pi). My code is so far simply to test.
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="kyon.mp3" type="audio/mp3">
</audio>
<p> <audio controls>
<source src="shakira.mp3" type="audio/mp3">
</audio>
<p> <audio controls>
<source src="/mnt/SEAGATE_BACKUP_1/MP3/Carly_I_Really_Like_You.mp3" type="audio/mp3">
</audio>
</body>
</html>
I can play first two mp3 but cannot play the third, I have checked permissions which seem fine.
Any idea?
I had the same problem with the python gTTS framework, and get_urls() gave me 2 translate.google.com URLs. My sound controls were also grayed out, and when I copy and pasted the URL into another tab, it gave me a 404 error. I pressed "Reload" and it worked, when I reloaded my own site that used get_urls(), the controls became normal. In short, if you use Chrome, try this:
Open it in an actual tab, and reload the page.
Reload your own server.
Hopefully, it works!
SHacker (left my login credentials on my Raspberry Pi)
The mp4 video does not play from localhost.
But mp3 audio works.
i.e.
Following code for playing video (stored as C:\inetpub\wwwroot\video\testVideo.html) does not work when accessed through (http://localhost/video/testVideo.html)
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</body>
</html>
But, following code for playing audio (C:\inetpub\wwwroot\audio\testAudio.html) works when accessed through (http://localhost/audio/testAudio.html)
<!DOCTYPE html>
<html>
<body>
<audio width="400" controls>
<source src="audip.mp3" type="audio/mp3">
Your browser does not support HTML5 video.
</audio>
</body>
</html>
However, they both work when webpage is launched by double clicking on html file i.e. webpage is accessed through (file:///C:/inetpub/wwwroot/audio/testAudio.html) or (file:///C:/inetpub/wwwroot/video/testVideo.html)
Please explain what am I doing wrong. And how to make video play from localhost.
I am using following browsers:
IE 11.0
Chrome 44.0
Firefox 40.0
I finally figured it out.
The video doesn't play via localhost, because IIS localhost in Windows doesn't contain MIME type entry (video/mp4) for .mp4 file format.
To make this work, a MIME type entry should be added in following way:
Open IIS Manager
Select your machine from Connection panel
From middle panel, double-click 'MIME Types'
Right-click on the list and select 'Add' option
Add file extension and MIME type e.g. for MP4 videos, file extension: .mp4 and MIME type: 'video/mp4'
Thats it.
Now refresh your page and Bingo!. It works.
I am developing a web app which will be able to live stream or at least send video files which both user can access at same time.
I am using HTML5 and node.js
Is this a linux machine? I would recommend ffmpeg's ffserver for streaming. It gives you many configuration options and runs stable on my machine here. Like that you could convert your streaming source to the format you need for your player.
Instead of streaming, we can do one thing
If you have a server machine then upload that audio/video on that server machine.
You can upload in Node.js with the help of formidable module.
And since HTML5 allows video and audio so no need of flash player, just make sure the audio/video will be compatible in all browsers (for videos, mp4 works in all major browser Check this link for more information on HTML Videos). And after upload send a command(video location) from server to all clients which plays the video from the desired location in javascript
<html>
<body>
<video id='videoPlayer' width="320" height="240" controls="controls">
<source id='mp4Source' src="movie.mp4" type="video/mp4" />
<source id='oggSource' src="movie.ogg" type="video/ogg" />
</video>
<!-- You MUST give your sources tags individual ID's for the solution to work. -->
<script>
socket.on('videoLocation',function(data)
{playVideo(data);});
function playVideo(location){
var player = document.getElementById('videoPlayer');
var mp4Vid = document.getElementById('mp4Source');
player.pause();
// Now simply set the 'src' attribute of the mp4Vid variable!!!!
// (...using the jQuery library in this case)
$(mp4Vid).attr('src', location);
player.load();
player.play();
}
</script>
</body>
</html>
I'm a webmaster and I'm managing multiple website in a single server. I used "virtualhost" to dispatch each website url to the right folder under arn.ae.
So the main url is arn.ae which is the root of my server and radioshoma934.ae is a sub website pointing to a subdirectory called shoma.
In IE9, I discovered that when I use the subwebsite url to point to my audio like this:
<audio controls="controls">
<source src="http://radioshoma934.ae/vincent.mp3" type="audio/mp3" />
</audio>
--->The audio is not loaded but if I'm using a full path like this :
<audio controls="controls">
<source src="http://arn.ae/shoma/vincent.mp3" type="audio/mp3" />
</audio>
---> It works.
Any body know what configuration is needed in my server to make my subwebsite url working?
It is because src="http://arn.ae/shoma/vincent.mp3" is the root address of your server It is the exact location of the file. The First one src="http://radioshoma934.ae/vincent.mp3" is pointing to arn.ae/shoma/. The src tag requires the direct link to the media on the server. and the root url arn.ae/shoma/* is the root path.
you can try doing src="/shoma/vincent.mp3" a relative link.
Hope that helps