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>
Related
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 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
I have a "logo" component which essentially writes out a picture element. The template look like this:
<picture class="logo">
<source srcset="{{srcsetMobile}}" media="(max-width: 767px)">
<source srcset="{{srcsetDesktop}}" media="(min-width: 768px)">
<img class="logo" title="{{title}}" alt="{{alt}}" src="{{fallbackSrc}}"
</picture>
In angular2 this produces
<picture _ngcontent-lox-3="" class="logo">
<source _ngcontent-lox-3="" media="(max-width: 767px)" ng-reflect-srcset="/assets/img/Logo-mobile.png" srcset="/assets/img/Logo-mobile.png"></source>
<source _ngcontent-lox-3="" media="(min-width: 768px)" ng-reflect-srcset="/assets/img/Logo.png" srcset="/assets/img/Logo.png"></source>
<img _ngcontent-lox-3="" class="logo" ng-reflect-title="title" title="title" ng-reflect-alt="alt text" alt="alt text" ng-reflect-src="/assets/img/Logo-mobile.png" src="/assets/img/Logo-mobile.png">
</picture>
In Chrome this works great but in Firefox only the mobile image loads. The tag loads fine outside of Angular. When I use a web inspector and remove the angular attributes everything works fine so I'm thinking its a browser bug but I thought I'd post here to see if others had the issue or if someone has a workaround.
For me this does not work properly on Firefox. In the inspector I can see the DOM is correct but the images won't load properly. Only the last source is being rendered no matter the screen size.
Chrome and Safari do work without any issues.
I have the following HTML inside an Angular 2+ component.
<picture class="view-header__logo-picture">
<source
media="(max-width: 1040px)"
srcset="images/logo-32x32.png, images/logo-64x64.png 2x"
/>
<source
media="(min-width: 1041px)"
srcset="images/logo-72h.png, images/logo-144h.png 2x"
/>
<img class="view-header__logo-image"
src="images/logo-72h.png"
alt="{{ 'general.company-title' | translate }}"
/>
</picture>
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
I've (with help) added the video.js player to a web page and it plays well in all browsers except Firefox. When accessing via Firefox, and trying to play a video I see: "no video with supported format and MIME type found".
Here's my player code:
<object class="vjs-flash-fallback" width="640" height="264" type="application/x- shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://url.com/flowplayer/flowplayer-3.2.16.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["[var.base_url]/[var.thumb_file]", {"url": "http://url.com/uploads/ [var.video_play]","autoPlay":false,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="[var.base_url]/[var.thumb_file]" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
</object>
</video>
Any suggestions/ideas/remedies will be appreciated.
Try changing your code to:
<video id="myMovie" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
<source src="/path/mymovie.mp4" type='video/mp4' />
<source src="/path/mymovie.webm" type='video/webm' />
</video>
video.js should handle all the necessary fallback nonsense that made embedding videos such a headache back in the day.