I got my routing here:
get "/fortytwo" do
send_file("42.mp4")
end
And my HTML for the page that shall play the video is as follows:
<body>
<video controls autoplay>
<source src="fortytwo" type="video/mp4">
</video>
</body>
But when loading the page, a disabled video player shows up that won't play any media. Linking to a copy of the video that was uploaded to Dropbox with "dl=1" works perfectly fine.
The code you posted is working fine, so the problem must be somewhere else than in Sinatra. Maybe a CORS problem, where is your HTML file located? It should be on the same domain where Sinatra is running.
I remade the whole program (below) and it's working:
require 'sinatra'
get "/fortytwo" do
send_file("42.mp4")
end
get "/" do
page = <<-endfile
<body>
<video controls autoplay>
<source src="fortytwo" type="video/mp4">
</video>
</body>
endfile
end
Related
I uploaded a video file in the storage folder and stored the path in database.
I want to play the video on the blade but it is not working
video.blade.php
<video controls>
<source src="{{asset('storage/'. \App\Video::where('vid_id', $vid_id)->value('vid_path'))}}" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Path to the video
http://127.0.0.1:8000/storage/videos/2022_06_19_HmhR5cXugaEfvWe315Vi.mp4
The file uploads successfully but it does not play
You need to use the public path for the video asset. What I'd suggest:
Check if you can access the video directly from the URL that you mentioned.
In your code snippet, remove
<source src="movie.ogg" type="video/ogg">unless you have a movie.ogg resource of that format
Use url(), or public_path(), or asset() helpers to assign the src
something like this:
<video width="320" height="240" controls>
<source src="{{asset('path-to-your-video')}}" type="video/mp4">
</video>
I have a problem playing HLS (m3u8).
I have a System with some Live streams. To play these streams I wrote a Webpage using Videojs.
This runs smoothly on Desktop with Chrome, Firefox and even Edge.
But with Mobile the Firefox wont play it anymore.
The Firefox Browser gets the playlist, shows the first frame and gets stuck. It then shows the following error:
A network error caused the media download to fail partway.
the code Iam using looks like this
<div>
<video
id="my-video"
class="video-js vjs-big-play-centered"
controls
<?php if(isset($_GET["autoplay"])) echo "autoplay"; ?>
preload="auto"
width="1920"
height="1080"
poster="pic/Video_Hintergrund.png"
data-setup='{"fluid": true}'
onplay="onVideoStartPlaying();"
onpause="onVideoStopPlaying();"
>
<source src="[...]/index.m3u8" type="application/x-mpegURL" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
</div>
The Webpage and the Stream are located on the same Server.
Does anyone have some tips what I can try?
I am working with Vue.js 2 and Laravel and have been trying to load a video from a local folder of my project without success.
Vue-loader plugin is correctly installed and added in my webpack.config.js as specified on the docs: https://vue-loader.vuejs.org/guide/#manual-setup
I have tried the most simple way.
<template>
<div>
<video autoplay muted loop id="myVideo">
<source src="/storage/videos/landing.mp4" type="video/mp4" />
</video>
</div>
</template>
I have also tried with a different approach as suggested on another stackoverflow question by dinamically updating the src attribute when the component is mounted.
<template>
<div>
<video ref="videoRef" src="" autoplay muted loop id="myVideo"></video>
</div>
</template>
<script>
export default {
mounted: function() {
this.$refs.videoRef.src =
"/storage/videos/landing.mp4";
}
};
</script>
None of those have worked tho.
Im quite sure the problem lies in Vue not resolving the video route properly since I have tried to use a dummy video link from the web and it is working absolutely fine.
Firefox is also giving me some clues.
However, Im not sure about what the problem is or how to solve it. Thanks in advance.
PS: I have triple checked the route specified and it definitely exists in my project.
Either you load your video with an es module import, your loader has to be able to import mp4, and you put that in the src
import video from 'path/to/video/a.mp4'
and in your component you do
<video :src="video">
PS make sure that the imported video is then defined in your data function.
Or you can use it like your doing with src="path/to/folder" and try to understand where that path is pointing at through your network tab, and put the video in the right folder based on that.
A site I am working on: http://ninthmind.com, looks good remotely in all browsers except Firefox 29.0.1. I have cleared my cached and searched for syntax errors. The weird thing is it looks as expected locally on my machine in the same Firefox browser.
There is a video element within the site that is also not appearing (only remotely in firefox) despite having both mp4 and webm sources. In the code below the class "invis" changes the mask's and the video's display to none for mobile devices.
<div class="header">
<img class="invis" id="mask" src="images/mask.png">
<video class="invis" id="brain" autoplay loop>
<source src="video/brain.mp4" type="video/mp4">
<source src="video/brain.webm" type="video/webm">
</video>
<div class="welcome">
<h1>Welcome to</h1>
<img id="logo" src="images/logo.png" alt="Logo">
<h3>subheading</h3>
</div>
</div>
That webm file is being served with the wrong mime type. It should be "video/webm" but it's being served as "text/plain". You probably have this set up correctly on your local machine (or you're using "file://") but not the remote server.
These instructions should help you:
http://voice.firefallpro.com/2012/03/html5-audio-video-mime-types.html
So, I'm just trying to put a simple html5 video player on this clients website while I do the rebuild.
Thought it would have been a straight forward thing to do but when I checked it in FF all I see is a dark box with a grey "x" in it.
I am using the latest FireFox 3.6.12.
You can see for yourselves here.
This is the code Im using - I thought it was valid html5 - maybe not?
CODE :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="reel2.css" type="text/css" media="screen" />
<title>Christopher Stewart - Theatrical and Commercial Reels</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="back">
<img src="http://thechristopherstewart.com/REEL_files/ChrisStewart_Website.jpg" />
<span class="backbtn">——back</span>
</div>
<span class="page_title">Christopher Stewart: Video Reel</span>
<div class="theatrical">
<span class="title">Theatrical Reel</span><br><br>
<video width="640" height="480" preload controls>
<source src="reelvids/120610-reel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="reelvids/120610-reel.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="reelvids/120610-reel.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
</div>
</div>
</body>
</html>
* EDIT 12/6/10 - 3:00pm *
After following a a tip that the video did not seem to be on the server I investigated; the video is on the server but is only accessible if ftp is entered into the browser - otherwise a 404 error is generated. Not sure why this is happening - if anyone out there knows how to fix this please let me know!
Thanks for all the great help!
It seems that out of those three only the .mp4 file exists on the server. Is that on purpose? Firefox probably doesn't support the codec used in the .mp4 file, and tries to fall back to your fallbacks which don't exist.
Edit: I can see that you're using IIS as your HTTP server of choice. I'll avoid going into your choice of software for now, but if the files actually exist on the server, this is likely caused by IIS's policy with unknown file extensions. IIS is made so that it refuses to send any files with unknown extensions to the client. If the extension is unknown, it returns a 404 error. IIS has a subcode of sorts for this, which it may show on its own error pages, but obviously the true HTTP error code is always 404. The code for "file not found" is 404.0, while the code for "unknown file extension" is 404.3 (here's a complete list of error codes).
You need to add those file extensions into your IIS configuration with the correct MIME types.
The problem was fixed by configuring the IIS as Matti Virkkunen suggested. The IIS for GoDaddy's hosting does not include the theora (.ogg, .ogv, .oga) file extensions or the .webm extension by default. This means that if you put a file with any of these extensions onto the server they won't be recognized and thus (in an effort to protect the user) will not be allowed to be viewed/interacted with by the user.
One way to solve this is to create a web.config (aka an xml file with a config extension on it) to force the server to accept certain MIME types. Then upload it onto the root hosting folder. Be careful you do not overwrite an existing web.config as it could cause your site to crash. Also, telling the IIS to allow a file type that it already allows (.mp4 for instance) will also cause unexpected errors. Before creating/editing your web.config file be sure to check in with the IIS's default permissions.
This is what my web.config file looks like to fix the GoDaddy IIS problem :
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
<mimeMap fileExtension=".oga" mimeType="audio/ogg" />
<mimeMap fileExtension=".ogv" mimeType="video/ogg" />
<mimeMap fileExtension=".webm" mimeType="video/webm"/>
</staticContent>
</system.webServer>
</configuration>
As far as I know FF3.6.x does not have HTML5 support. It does support HTML5 video tag, but only for specific codecs.
This is from http://support.mozilla.com/en-US/kb/Youtube%20HTML5%20does%20not%20work%20in%20Firefox
Youtube is currently testing HTML5,
but does not list Firefox as a
supported browser. While Firefox can
display HTML5 video, Youtube uses a
patented codec to encode the videos,
making it unusable by open-source
software like Firefox.
I used your code with my own videos, and if the referenced video files exist and are of the proper format, everything works.