Multimedia on the web - HTML5 video and audio
-
Upload
christian-heilmann -
Category
Education
-
view
8.253 -
download
1
description
Transcript of Multimedia on the web - HTML5 video and audio
![Page 1: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/1.jpg)
Multimedia on the web.HTML5 Audio and Video
Christian Heilmann, MIT Boston, January 2012
![Page 2: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/2.jpg)
I’m Chris.
![Page 3: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/3.jpg)
What we will cover:★ Quick history of Multimedia on the web★ Annoyances with Flash★ HTML5 audio and video★ Painful stuff – codecs and conversion★ Embedding★ Controlling★ Transforming★ Realtime changes★ Awesome audio stuff
![Page 4: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/4.jpg)
Quick history of Multimedia on the web
![Page 5: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/5.jpg)
First, there were images.
JPG, GIF, PNG (later), WBMP, ICO
![Page 6: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/6.jpg)
Connections were bad.
Progressive JPG, interlaced GIF, <img src=”foo.jpg” lowsrc=”foogrey.gif” alt=”a foo, what else?”>
![Page 7: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/7.jpg)
Animation was done with animated GIFs or with JavaScript animation.
![Page 8: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/8.jpg)
Audio was mostly Midi background music.
(and if you think about using that today I will hit you!)
![Page 9: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/9.jpg)
Other things we did were Java Applets.
![Page 10: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/10.jpg)
And then we gotRealPlayer.
![Page 11: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/11.jpg)
And many others...
★ Quicktime / Quicktime VR★ Microsoft Media Player★ Shockwave★ Acrobat had some image
editing features.★ iPix / VRML and many other
forgotten ones...
![Page 12: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/12.jpg)
They all had the same issues.★ End users must install a
plugin.★ You need to upgrade the
plugin constantly.★ There is limited interaction
with the rest of the page.
![Page 13: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/13.jpg)
Another big issue is and was security – plugins are one of main attack vectors for malware.
![Page 14: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/14.jpg)
In the end, one plugin prevailed over all the others: Flash.
![Page 15: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/15.jpg)
With aggressive marketing, clever partnerships and a rich dev environment Flash became the multimedia choice for the web.
![Page 16: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/16.jpg)
And there is the DRM stuff...
![Page 17: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/17.jpg)
Annoyances with Flash
![Page 18: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/18.jpg)
+
=
Apple and Flash movies means a lot of times your fan will start up.
![Page 19: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/19.jpg)
Why would I want yet another editor to build web content?
![Page 20: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/20.jpg)
<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/SJixW2u4IvQ?fs=1&hl=en_US" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/SJixW2u4IvQ?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385" /></object>
WTF is all this?
![Page 21: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/21.jpg)
Flash is a black box inside a document.
Alien
![Page 22: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/22.jpg)
Therefore it is also an accessibility problem.★ Other browsers than IE don’t allow you
to access Flash with a keyboard.★ You are at the mercy of the developers
to make their movies keyboard accessible.
★ Which is bad, as audio and video can help a lot of people to understand things.
![Page 23: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/23.jpg)
Flash can talk to JavaScript via APIs.
![Page 25: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/25.jpg)
You are at the mercy of the API developers though – what they don’t make public, you can’t reach.
![Page 26: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/26.jpg)
HTML5 audio and video
![Page 27: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/27.jpg)
HTML5 audio and video make things much simpler:★ Better accessibility★ Doing one thing well★ Much simpler API★ Allows for styling and overlays★ View-source “hackable”
![Page 28: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/28.jpg)
Screencast of Oprah’s web site
http://www.oprah.com/own
![Page 29: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/29.jpg)
Painful stuff – Codecs and conversion
![Page 30: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/30.jpg)
So, we understood that there is a need for an open high-fidelity technology if we really want the web to be a media.
![Page 31: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/31.jpg)
What we didn’t quite consider yet is something that both accelerated and hindered innovation for a long time.
![Page 32: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/32.jpg)
Copyright
![Page 33: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/33.jpg)
Videos on the web are encoded to make them smaller – there is no such things as an “AVI File”...
![Page 34: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/34.jpg)
They are containers for video in a certain compression and audio in another.
![Page 35: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/35.jpg)
The issue was that all these compression formats had their own copyright and didn’t work with open technology like HTML5.
![Page 36: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/36.jpg)
Therefore we needed new formats:
★ H.264 “MP4”★ OGG/Vorbis★ VP8 / WebM
![Page 37: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/37.jpg)
Our job is now to convert the videos we record to these open formats – which can be annoying.
![Page 38: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/38.jpg)
The main annoyance is that different browsers support different formats, which means we need to provide several versions :(
![Page 39: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/39.jpg)
Audacity: http://audacity.sourceforge.net/
WebM tools: http://www.webmproject.org/tools/
Evom: http://thelittleappfactory.com/evom/
VLC: http://www.videolan.org/vlc/
Ogg convert: http://oggconvert.tristanb.net/
Firefogg: http://firefogg.org/
TinyOgg: http://tinyogg.com/
ffmpeg:http://ffmpeg.org/
![Page 40: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/40.jpg)
http://www.mirovideoconverter.com/
![Page 42: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/42.jpg)
Embedding
![Page 43: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/43.jpg)
Embedding audio and video in an HTML5 document is easy:<audio src=”foo.ogg”> If your browser didn’t suck, you’d have audio here.
</audio><video src=”foo.ogv”> If your browser didn’t suck, you’d have video here.
</video>
![Page 44: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/44.jpg)
That doesn’t do anything yet<video src=”foo.ogv” controls> If your browser didn’t suck, you’d have video here.
</video>
★ Controls appear on mouse hover or tabbing
★ Keyboard enabled controls
★ Video can be styled in any way.
![Page 45: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/45.jpg)
Controls differ from browser to browser...
Firefox
Opera
Safari
Chrome
Full Screen
![Page 46: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/46.jpg)
So to give it to all browsers... <video controls> <source src="http://www.archive.org/{...}_512kb.mp4" type="video/mp4"></source> <source src="http://www.archive.org/{...}nsters.ogv" type="video/ogg"></source> <p>Your browser doesn't like HTML5 video, watch the movie on <a href="http://www.archive.org/{...}_monsters"> archive.org</a>. </p> </video>
![Page 47: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/47.jpg)
Things to consider:
★ Use MP4 always as the first option to support iOS devices (iPads, iPhone and so on...)
★ If you omit the type attribute, the browser loads the meta data of each source!
![Page 48: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/48.jpg)
Media queries can save bandwidth: <video controls> <source src="http://www.archive.org/{...}_512kb.mp4" type="video/mp4" media="(min-device-width:800px)"></source> <source src="http://www.archive.org/{...}_low.mp4" type="video/mp4"></source> <source src="http://www.archive.org/{...}nsters.ogv" type="video/ogg"></source> <p>watch the movie on <a href="{...}_monsters"> archive.org</a>.</p> </video>
![Page 49: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/49.jpg)
Other attributes:
★ poster – define a picture to show before loading.
★ height/width – oh, well...★ loop – automatically restart★ preload (auto/none/
metadata)
![Page 50: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/50.jpg)
But what if you don’t like the controls?
![Page 51: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/51.jpg)
Controlling
![Page 52: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/52.jpg)
HTML5’s Media API gives you control:
★ load() – load a new media.★ canPlayType(type) – returns probably,
maybe and “” (really!)★ play() – play the movie★ pause() – pause the movie.★ addTrack(label,kind,language) -for
subtitles
![Page 53: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/53.jpg)
Video details:width / height / videoWidth / videoHeight / poster
Controls:controls / volume / muted
Tracks:tracks
Network state:src / currentSrc / networkState / preload / buffered
Ready statereadyState / seeking
Playback statecurrentTime / startTime / duration / paused / defaultPlayBackRate / playbackRate / played / seekable / ended / autoplay / loop
![Page 54: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/54.jpg)
Writing a play button is simple:var audio = document.getElementsByTagName('audio')[0];var play = document.getElementsByClassName('play')[0];play.addEventListener('click',function(e){ var t = e.target; if(audio.paused){ audio.play(); t.innerHTML = 'pause'; } else { audio.pause(); t.innerHTML = 'play'; } e.preventDefault();});
![Page 55: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/55.jpg)
However, simply checking properties is not safe!
![Page 56: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/56.jpg)
Any JS use gets much safer by listening to events.
![Page 57: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/57.jpg)
HTML5 video events:loadstart / progress / suspend / abort / error / emptied / stalled / play / pause / loadedmetadata / loadeddate / waiting / playing / canplay / canplaythrough / seeking / seeked / timeupdate / ended / ratechange
![Page 58: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/58.jpg)
video.addEventListener('play', playEvent, false);video.addEventListener('pause', pausedEvent, false);video.addEventListener('ended', function () { this.pause();}, false);function playEvent() { play.innerHTML = 'pause';}function pausedEvent() { play.innerHTML = 'play';}play.onclick = function () { if (video.ended) { video.currentTime = 0; } if (video.paused){ video.play(); }else{ video.pause(); }};
![Page 59: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/59.jpg)
http://www.w3.org/2010/05/video/mediaevents.html
![Page 60: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/60.jpg)
You can use these events to sync animation or trigger changes with audio and video.
![Page 61: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/61.jpg)
http://isithackday.com/spirit-of-indiana/
![Page 62: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/62.jpg)
![Page 63: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/63.jpg)
![Page 64: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/64.jpg)
![Page 65: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/65.jpg)
![Page 66: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/66.jpg)
![Page 67: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/67.jpg)
Transforming
http://www.flickr.com/photos/jiazi/1061447777
![Page 68: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/68.jpg)
I am a film buff and I like to find easter eggs in movies. Every pixar movie for example has A113 in it – the room in the uni a lot of pixar employees had their animation lectures in. To find things like that I sometimes zoom the screen and scan around.
I thought this should be possible in HTML5.
![Page 69: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/69.jpg)
http://isithackday.com/mit/transforming-video.html
![Page 70: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/70.jpg)
Using SVG and other technologies you can change the look and feel of videos even more.
![Page 71: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/71.jpg)
http://people.mozilla.com/~prouget/demos/round/index.xhtml
![Page 72: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/72.jpg)
http://people.mozilla.com/~prouget/demos/mashup/video.xhtml
![Page 73: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/73.jpg)
Realtime changes
![Page 74: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/74.jpg)
http://introducinghtml5.com/examples/ch05/animate-with-video.html
![Page 75: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/75.jpg)
http://people.mozilla.com/~prouget/demos/green/green.xhtml
![Page 76: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/76.jpg)
http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml
![Page 77: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/77.jpg)
http://people.mozilla.com/~prouget/demos/tracker/tracker.xhtml
![Page 79: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/79.jpg)
Awesome audio stuff
![Page 80: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/80.jpg)
https://developer.mozilla.org/en/Introducing_the_Audio_API_Extension
![Page 81: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/81.jpg)
https://wiki.mozilla.org/Audio_Data_API
![Page 82: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/82.jpg)
http://hacks.mozilla.org/2011/01/html5guitar/
![Page 83: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/83.jpg)
http://audioscene.org/scene-files/humph/sfxr/
![Page 84: Multimedia on the web - HTML5 video and audio](https://reader033.fdocuments.in/reader033/viewer/2022042714/5551514bb4c905c6268b55ce/html5/thumbnails/84.jpg)