I'm trying to get rid of the message "Serve Images in Next-Gen Formats" in PageSpeed Insights (PSI). In order to do that, I'm changing all HTML code of the images to:
<picture>
<source type="image/webp" srcset="imgwebpversion.webp">
<source type="image/jpeg" srcset="imgjpegversion.jpg">
<img src="imgjpegversion.jpg" alt="alt description here" width="200" height="56">
</picture>
But PSI keeps on showing the message. Does anyone know what's the correct approach to serve webp images and still support old browsers?
Thank you very much for your time.
Related
I must start by saying I'm a newbie to html. I start from scratch and I try to do it the right way.
I've got a lot of help from stack overflow and most of my problems were solved by other's requests for help. But I don't seem to get an answer to a simple problem I got.
I've checked several answers to this problem, but none of it works for me.
MY PROBLEM: my videos only plays on Safari and at no other browser.
The most relevant post was the following: HTML5 video won't play in Chrome only
I tried the correct order and re-converting my files to mp4, ogg and webm using Miro converter but both didn't work. I added the codecs in to my code but this doesn't change anything. I added plays-inline as well from another relevant post but nothing...
My code is the following:
<!-- LANDING PAGE VIDEO - INTRO VIDEO -->
<video class="videoIntro" id="SiteIntro" autoplay="no-repeat" poster="VMF_MENU.png" plays-inline>
<source src="videos/Site_Intro.mp4" type="video/mp4">
<source src="videos/Site_Intro.webm" type="video/webm" codecs="vp8, vorbis">
<source src="videos/Site_Intro.m4v" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2">
<source src="videos/Site_Intro.ogv" type="video/ogg" codecs="theora, vorbis">
</video>
I got no error messages (expected).
What do you suggest I try to correct this?
Thank you in advance!
I am in new territory for me here. I am trying to embed AWS S3 hosted video into a html website authored with Netobjects Fusion.
I tried putting in the code from the getting started page and successfully got my website to play the video.js promo video, however, when I try to alter that to play my videos I get an invalid file path error. Below is the altered code. Can anyone direct me as to what I am missing or messing up? Do I need to define the video id somewhere else? Also, I am not sure what to do with the data-setup='{"example_option":true}'> line. Thanks.
<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<video id="6915MLD" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="480"
poster="https://s3-us-west-2.amazonaws.com/premiervideotours/PVTx320.jpg"
data-setup='{"example_option":true}'>
<source src="https://s3-us-west-2.amazonaws.com/premiervideotours/PVT-6915MLD2015b2b.mpg" type='video/mp4' />
<source src="https://https://s3-us-west-2.amazonaws.com/premiervideotours/PVT-6915MLD2015b2b.webm" type='video/webm' />
</video>
Even after correcting your URLs to the below, I get access denied when visiting them in a browser.
https://s3-us-west-2.amazonaws.com/premiervideotours/PVT-6915MLD2015b2b.mp4 (mpg to mp4)
https://s3-us-west-2.amazonaws.com/premiervideotours/PVT-6915MLD2015b2b.webm (removed duplicate https://)
S3 will respond with access denied not only when the permissions of the file don't allow access, but also when the file is not found. So check both whether the files are in the location the URLs point to, and whether they are 'public'.
Re data-setup='{"example_option":true} - there are a couple of options to set up video.js after including the script and css. One is to include a data-setup attribute. The value of the attribute is a json string which can include setup options or be empty, e.g. data-setup='{}. The "example_option" is just that, an example of how it would look if you need to pass setup options.
I've been using Video.js to embed mp4 videos, it's a great player, thanks to everyone who develops and works on it. For the most part, it's working great, but I have a few small issues I need to figure out.
Here's one of the video pages; Columbia River Bass Fishing. It's mostly XHTML Transitional, I think mixing the HTML 5 in is causing some issues, especially with attribute values, but as long as it works, I'll figure out the details later. Here's the video.js code:
<video id="WAW_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" poster="ColumbiaRiverSmallmouthBassFishing.jpg" data-setup='{"WAW_option":true}' >
<source src="ColumbiaRiverSmallmouthBassFishing.mp4" type='video/mp4' />
<track kind="captions" src="captions.vtt" srclang="en" label="English" default />
Your browser does not support this video. Maybe you should update your internet browser
</video>
The video stuff works great in Firefox, Chrome and IE11, but no captions. The "captions.vtt" file is correct and IE10 will display the captions locally on my computer, but on the remote server there are no captions. I tried using the full URL location for the VTT file but that didn't work either.
A quick look at the coding on this page should tell you that I'm no expert, but I'd like to try and produce code that works and is compliant, so forgive the stupid questions.
Thanks in advance
Ron B
Change .vtt to .txt rule out if it's a MIME type issue with your web server config.
If you need to add web.config to your root, it needs to list .vtt as an acceptable MIME type.
a question concerning Google Text-to-Speech (TTS) with PHP.
With the help of this script http://stuffthatspins.com/stuff/php-TTS/
#$this->mp3data = file_get_contents("http://translate.google.com/translate_tts?ie=utf-8&tl=".$lang."&q={$text}");
I have been able to access the Google TTS API and download mp3 files to my server. Unfortunately I don't get the mp32ogg programm installed on my server so I wanted to ask whether anybody knows if there is the option to download a .wav file directly from Google?
Just saving the resulting file as .wav didn't work as Firefox throws me a "couldn't decode this .wav file"
I would need it for Firefox support of HTML5 Audio.
Thanks for any help!
I don't know exactly what your final goal is, but have you tried using the "embed" tag instead of "audio"?
I use Firefox and replacing:
<audio controls="controls" autoplay="autoplay">
<source src="<?=$mp3?>" type="audio/mp3" />
<source src="<?=$ogg?>" type="audio/ogg" />
Your browser does not support the audio tag.
</audio>
with:
<embed src="<?=$mp3?>" type="audio/mp3">
got it working.
Let me know if it helps you out, I would like to see the finished project.
I've been working on an HTML5 video implementation, but I'm having some issues. I've been following the guide at http://diveintohtml5.info/video.html. I have encoded .m4v, .ogv, and .webm versions of all of the video. Chrome and Firefox have no troubles playing the video. When I attempt to play it in Safari, it loads the video container, but not the video. You see a white space where the video should be, the controls, and the "loading" text. In Web Inspector's network tab, the video's status is "pending" and the mime-type is "undefined". Interestingly, I only experience this problem on the staging site, while it works fine on my local dev.
When I visit the video directly in the browser on local dev, I get the following output in the console:
Resource interpreted as Document but transferred with MIME type video/x-m4v.
GET http://site.dev/content/videos/movie.m4v Plug-in handled load
Note that GET has a little red x to the left of it in the inspector.
My html code looks like:
<video class="html5-video" width="700" controls>
<source src="content/videos/movie.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="content/videos/movie.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="content/videos/movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
Your browser does not support this video.
</video>
Additionally, the video is ~20mb.
Any thoughts? Thanks!
Well...it turns out that the issue occurred because I was using .htaccess to password protect the directory. Interestingly, all browsers except for Safari would allow access to the video files. Thanks to those who helped!
Try encoding to mp4 and replace this file instead m4v format, update your code and run.
Work's fine.