I am trying to output some HTML video tags park of which include
<source src="${Model.WebMFilename}" type='video/webm; codecs="vp8, vorbis"' />
However in the browser this renders as
<source vorbis""="" vp8,="" type="video/webm; codecs=" src="VP8_645001.webm"></source>
Any idea how I stop Sparkview reformatting the output?
Are you sure about your output? I ran this exact scenario through a unit test in the source code and I got the following:
Input:
<source src="${Model.WebMFilename}" type='video/webm; codecs="vp8, vorbis"' />
Result:
<source src="VP8_645001.webm" type="video/webm; codecs="vp8, vorbis"" />
This looks like a "feature" in Spark is getting in the way here, and this is becoming more prevalent with client side frameworks, json popularity and HTML5 attributes usage.
The "feature" I speak of is that Spark can read your input and you can have single or double quotes surrounding your attributes and it will understand the value inside the attribute without an issue, but there is a current side effect of view compilation that automatically (and incorrectly) replaces the surrounding attributes with double quote instead of the quote type you actually used.
I am currently working on a fix for this in the source code. In the mean time, you could try and place your double quotes on the outside of the attribute and try single quotes on the inside although I know this does break some of the client side frameworks since they don't expect that. Can you try this instead (Note: single quote on the inside):
<source src="${Model.WebMFilename}" type="video/webm; codecs='vp8, vorbis'" />
Hope that helps,
Rob
I managed to get the desired output by wrapping the single quote !{"'"} so
<source src="${Model.WebMFilename}" type=!{"'"}video/webm; codecs="vp8, vorbis"!{"'"} />
Rendered
<source src="VP8_645001.webm" type='video/webm; codecs="vp8, vorbis"' />
Related
I have a weird problem where the browser says the server returns a 404 on an image.
However visiting the URL directly shows the image. The image is within the <picture> element, which loads in a slightly different order. Could that be the cause, and if so why? Could it be cached?
Here's the site:
https://www.vamoney.squareballoon.co.uk/
And here's my code from that site:
<picture>
<source media="(min-width:1201px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--1920.webp" type="image/webp">
<source media="(min-width:1201px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--1920.jpg" type="image/jpg">
<source media="(min-width:960px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--1200.webp" type="image/webp">
<source media="(min-width:960px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--1200.jpg" type="image/jpg"><source media="(min-width:768px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--959.webp" type="image/webp">
<source media="(min-width:768px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--959.jpg" type="image/jpg">
<source media="(min-width:480px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--767.webp" type="image/webp">
<source media="(min-width:480px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--767.jpg" type="image/jpg">
<source media="(min-width:0px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--479.webp" type="image/webp">
<source media="(min-width:0px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--479.jpg" type="image/jpg">
<img src="/images/aspirational-photos/borrow--va-money-main-image--479.jpg" alt="VA Money - A picture of a calculator and some documents representing the idea that you can Borrow Money for your business requirements">
</picture>
The browser says the images are a 404. But visiting one directly (it's easiest to click the one on the img=src shows the image.
https://www.vamoney.squareballoon.co.uk/images/aspirational-photos/borrow--va-money-main-image--479.jpg
How can it be both a 404 and also viewable? This must be something idiotic I am doing right?
I had used the <picture> element to show WebP with a JPG fallback.
I had misunderstood that the JPG would fall back, because it only falls back when the browser does not support WebP. When it does support WebP it shows a 404 error if the WebP doesn't look.
So in this case, the issue was that the WebP was a 404 error but I was checking the JPG as I expected it to fall back.
Using Ruby, I am trying to find all <img> tags that have a <br /> immediately afterward.
For example, this is what I am looking for:
<img src="http://img-example.jpg" alt="some description"><br />
But this would be an example of what I am not looking for:
<img src="http://img2-example.jpg" alt=""><span>Some extended text</span><img src="http://img3-example.jpg" alt="some more descriptions"><br />
In the second example, there is a <br /> but it is not immediately preceded by the <img> tag and only the <img> tag.
I have tried Regex, and Nokogiri.
Albeit, my Ruby skills are pretty terrible.
Thoughts?
Is Nokogiri better? If so, what is your recommendation?
Regex better? If so, what is your recommendation for that?
I have used the following, but it returns true for both instances above:
img_with_break = string[/<img(.*?)alt=\"(.*?)\"><br \/>/]
You can do:
doc.search('img').select{|img| img.at('+ br')}
I would have thought just:
doc.search('img:has(+ br)')
but that doesn't work (bug in nokogiri)
I'm using the <picture></picture> tag to responsively display an image after assessing the size of the container it's in.
Some example code:
<picture>
<source media="(max-width: 70px)" srcset="IMAGE_URL">
<source media="(min-width: 71px) and (max-width: 170px)" srcset="IMAGE_URL">
<source media="(min-width: 171px) and (max-width: 270px)" srcset="IMAGE_URL">
. . .
<img src="IMAGE_URL" alt="An image">
</picture>
However, the <source media="(MEDIA_QUERY)" ... > part in an implementation of the format above considers the width of the entire screen, rather than the container that the <picture></picture> is currently inside.
Help on this is appriciated.
There is unfortunately no standard way (yet) to base responsive behavior upon a container instead of the browser viewport.
There are community efforts around Container Queries, but nothing has yet been defined, that could eventually become a standard.
There are several JavaScript libraries, like EQCSS, trying to provide solutions, but requiring JavaScript for a presentation —hence CSS— job is often not a good idea.
You can also look at CSS Conditions, but it also requires JavaScript.
You can use srcset and specify image size:
<div class="container">
<img src="image-200.jpg"
srcset="image-100.jpg 100w, image-200.jpg 200w,
image-400.jpg 400w, image-800.jpg 800w,
image-1000.jpg 1000w, image-1400.jpg 1400w,
image-1800.jpg 1800w" />
</div>
Browser will download optimal image file.
This is the HTML audio tag:
<audio controls autoplay loop muted>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
How is this written in Slim code, including the control, auto play and loop attributes?
You can get the empty attributes with boolean attributes in Slim. I guess your HTML snippet translates to something like this:
audio controls=true autoplay=true loop=true muted=true
source src="horse.ogg" type="audio/ogg"
source src="horse.mp3" type="audio/mpeg"
| Your browser does not support the audio tag.
or shorter
audio(controls autoplay loop muted)
…
If you are using Rails, you can also use the audio_tag helper: https://apidock.com/rails/ActionView/Helpers/AssetTagHelper/audio_tag
I'm working on embedding video to a web-page and am using mediaelements.js. I used following code from the mediaelements.js examples:
<video width="640" height="360" id="player2" poster="img/echo-hereweare.jpg" controls="controls" preload="none">
<source type="video/mp4" src="somevideo.mp4" />
<source type="video/webm" src="somevideo.webm" />
<source type="video/ogg" src="somevideo.ogv" />
<object width="640" height="360" type="application/x-shockwave-flash" data="flash/flashmediaelement.swf">
<param name="movie" value="flash/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=somevideo.mp4" />
<img src="img/echo-hereweare.jpg" width="640" height="360" alt="Here we are"
title="No video playback capabilities" />
</object>
</video>
Then later on comes the script-code from the example:
<script>
$('audio,video').mediaelementplayer({
success: function(player, node) {
$('#' + node.id + '-mode').html('mode: ' + player.pluginType);
}
});
</script>
Then I discovered some strange thing in Firefox. When I'm using this code without starting mediaelements.js (not using the script above), firefox tries to play the .mp4, but naturally the console reports an error that the .mp4 format is not supported. So far so right.
In my understanding, the video element should now try the next format – .webm. Instead the flash fallback gets loaded (flashmediaelement.swf) (nothing gets played so far, as the play-button is not clicked yet, but still the .swf is loaded completely).
Then when I play the video the .webm gets downloaded and played – as expected.
When I use it with mediaelements.js an even weirder thing is happening – the .swf not only gets fully loaded once, but is requested at least one more time, without being downloaded (you see it in firebug's network tab – a yellow line with a busy spinner, as if it would load and load. But there is no error or any status code, nor a filesize displayed. It seems kind of like an "stuck" request. I would like to post a screenshot of it, but am not allowed at the moment.).
Additionaly I get the alert in Firebug's console, that the .webm cannot be decoded. The .webm-video starts loading but won't be loaded fully (status code 206). Then no video plays at all, because the .webm is tried to play but stops because of the decoding error. Shoudn't the flash fallback jump in then?
My questions are now:
Is this normal behaviour in Firefox for media elements – that the
fallback flashplayer gets loaded, even though it is not needed?
Why does it load two or three times in the second scenario
allthough it is not used either? I guess this is a bug in mediaelemnts.js
And third, why does firefox play the .webm without mediaelements.js
and doesn't with mediaelements.js? I guess another bug?
Thx for any help.
---NOTE---
I know I am using the .swf that comes with the mediaelements.js as a fallback solution, even when I am not using mediaelements.js. Does anyone know a simple lightweight flash video player? Or would I have to stick with flowplayer as the standard flash video player?
I can't have multiple versions of all my video files (there's lots and the whole site is downloaded) so I wrote this and it seems to work on current Safari, FireFox and Chrome -should work on everything else or add to the non MP4 list
<script type="text/javascript">
/*U might need to add other non-MP4 native browsers*/
if (navigator.userAgent.indexOf('Firefox'||'Chrome') != -1) {
document.write("<object type='application/x-shockwave-flash' data='player.swf' width='480' height='270'>
<param name='movie' value='player.swf' />
<param name='allowFullScreen' value='true'/>
<param name='wmode' value='transparent' />
<param name='flashVars' value='controlbar=over&file=video/sequence03.mp4' />
<span title='No video playback capabilities, please download the video below'>
<a href='video/sequence03.mp4'>Sequence 03</a></span></object>")
}
else {
document.write("<video width='480' height='270' controls><source src='video/sequence03.mp4' type='video/mp4' /></video>")
}
</script>