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>
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 video in the database and also the directory folder. I am trying to display the video on the webpage but I dont see it. Can you help me? heres my code:
<div class="" style="border:1px solid blue;"><video height="300" autoplay controls><source alt="video not playing" src="{{asset ('introvideos/' .Auth::user()->intro_video) }}">
</source>
</video>
</div>
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.
i want to know what is wrong in this code
<canvas>
<view y="50" width="100%" height="300" bgcolor="blue" onmousedown="res.apply()" onmouseup="res.remove()">
<resizestate name="res"/>
<dragstate name="drg"/>
<text width="100%" bgcolor="gray" onmousedown="parent.drg.apply()" onmouseup="parent.drg.remove()">Drag here</text>
<html id="ht" src="text.html" x="15" y="15" width="${parent.width - 30}" height="${parent.height - 30}"/>
</view>
</canvas>
The code gets compiled but i am not able to see the html in swf version but i am able to see the html in dhtml version. I tried specifying the url too Still no results
It looks like the <html> tag functionality is broken in the SWF10 runtime of OpenLaszlo 5.0 (trunk) for some Webkit based browser (Chrome and Safari), but there are other problems as well. I've modified the code a bit to do some testing:
<canvas>
<button text="OpenLaszlo" onclick="ht.setAttribute('src', 'http://www.openlaszlo.org')" />
<button y="40" text="test.html" onclick="ht.setAttribute('src', 'test.html')" />
<view y="200" width="100%" height="300" bgcolor="blue" onmousedown="res.apply()" onmouseup="res.remove()">
<resizestate name="res"/>
<dragstate name="drg"/>
<text width="100%" bgcolor="gray" onmousedown="parent.drg.apply()" onmouseup="parent.drg.remove()">Drag here</text>
<html id="ht" src="http://www.openlaszlo.org" x="15" y="15" width="${parent.width - 30}" height="${parent.height - 30}"/>
</view>
</canvas>
Here are the results I'm seeing with this code for the SWF10 runtime:
InternetExplorer 9, Chromium 18 and Opera 12: Both pages (local test.html and OpenLaszlo) are displayed within the iFrame.
Firefox: Remote website OpenLaszlo.org displays, but local test.html is not shown.
Safari 5.1 and Chrome 21: Both pages are not shown within the iFrame
I would file an OpenLaszlo Jira bug, and send a message to the laszlo-dev developer mailing list referring to this discussion.
I've been developing in OpenLaszlo since 2006 and my personal experience with trying to use the OpenLaszlo <html> tag under the SWF run-time is that half of the pages I load into it work, half of them don't. I've come across situations where even simple web pages from Google will not work, it is a pretty unstable class, I do not recommend using it.