hello ladies and gentlemen welcome to our talk today we're going to be talking
about video content and its use and integration into websites and thinking a
bit more outside of the frame hello I'm Jack Walden front-end developer at Zengenti
and my role is a front-end developer at Zengenti obviously main focus is the
front-end of the website most we'll get involved in the UX and design stages and
along with the front-end large portion my job is all about the implementation
which is taking the front end and put in our home to dentists and I'm Matthew Addis
I'm the marketing assistant at Zengenti a lot of my work involves
making video content for YouTube and on our site and video has been a big
passion of mine ever since a young age where I would go away on holidays and
I'd make a family holiday video and then I started filming stage shows and short
documentaries and performances and all sorts of other stuff as well cool so
what it's all about so today we're gonna cover some key points and the first one
is what to consider with video production and integration and how
performance affects your your video and we'll also take a look at the future of
video especially the use of it on the web so some of the common integrations
for video are the main embed so this is where you usually use a third-party
software like YouTube or Vimeo and you upload your video to them and then you
take a code that codes and put it on your website usually in the middle of a
web page with supporting text and information with it yep this is really
good as well actually for analytics because the third-party vendors allow
you to have a lot of in-depth analytics with your content so you can find out
who's watching it how long they're watching it for and where they're
watching it and how they got there cool so one of the next uses we see quite a lot of
of is the video banner and this is sometimes used as a background
be an element where you have a background video with overlaying the
content on top of that but also you see it sometimes being users like a feature
banner with the actual video on there you don't normally see certain types of
video on there to do the just kind of pending on the video content just for an
example you wouldn't normally find something like a product specifaction
video as a ballast this is main purpose down pad there other inline embed tools
give you a bit more control mentality and taking that away from a banner isn't
a great for a kind of specification video so moving on from there the next
point you see prologue is a pop-up modal this is where you've got your actual
page so that's for example this area got a blog page a lot of cool to actions
something like new video once you can to make that button and a overlaid modal
will pop up and this is actually just an iframe that you can have any kind of
content in there so for example will have the same inline embed from the
first example quite the difference isn't it even though it is using the same
stuff just the actual from a Content point of view the fact is popping up on
top of your content and not in the middle or the blog post makes it kind of
a bit more adjacent to the actual content itself so you can either use it
as a support impactor a leading factor or you can have different points
throughout Mark's core content page that's pointing to the video well
they're just having one point for it a technical difference or kind of pros and
cons really of either and one thing to consider with the YouTube or third-party
embeds when using something like that it will come with some actual JavaScript
that gets loaded on the first initial page load so example of using YouTube on
the first a show it will load about a megabyte of JavaScript just to import
all the controls and the play/pause volume controls all those things can get
imported and you could add a function that won't delay that so it doesn't
actually increase your initial page load and but this is taking lead irritate
it's like a pop-up mode or Kleber or you've got a function to activate it and
all you gonna do is link it so potentially none of the video or assets
all that JavaScript will be loaded until you basically activate the modal
mix that real initial page load a lot how stone seamless so you've also got
some key considerations to make when you're producing your video content and
implementing it into your site the first one is value so making sure that the
content that you've got on the page is giving value to your users so making
sure that it's relevant informative and it's what the DS is expecting to see and
after that you've got accessibility which is making sure that all of your
videos are accessible pretty obvious but video is quite a difficult format for
information to come to some people so they may not be able to hear what you're
trying to say and they may not be able to see what you're trying to show so
making sure that you have transcripts and subtitles allows you to give that
information to people in a different format so they're able to understand and
know what you're trying to inform them about as well using transcripts and
subtitles you're giving more information to search engines so that they can rank
your videos higher and you can get better SEO next you've got ease of use
so just making sure that the videos that you're giving someone they have control
over and they understand what's going on there so giving them the ability to play
pause sound adjustment resolution adjustment and frame size adjustment and
just makes it all really easy for them to use make sure they know what what's
going on just trying to make sure that the users not having to think too much
about what they're trying to do exactly so movement for that and the next point
is performance so the next thing we always talk about first for you obvious
one is downloads especially when dealing with video the main concern is mobile
users so essentially here it's just about giving mobile users
turn ative if you've got your desktop version and if you're loading a video
especially loading it from your own server so if you've got a large mp4 file
whatever it is if you're just going to reduce IDs from a front-end aspect and
not actually changing the resources being used the mobile data is still
going to pull that down which will add a large costs or larger customers so then
we're using a lot of their data and with just to be the video it's it's really
key and graphics acceleration really to make sure we actually offer some kind of
alternatives maybe English for backs because sometimes on the mobile the
video you're trying to show run look pretty relevant for mobile user it kind
of ends on the use but make sure you get that different version it's quite
crucial and to do that you can use compression so making sure you're using
the right codecs and formats for your content is really important to making
sure the file size is small enough and adequate enough so making sure you use
formats like h.264 which produces an mp4 file it's the sort of standard codec
that you would use for producing video and it produces really high resolution
to really low resolution depending on what you want and it's a very versatile
codec as well so that's the standard that we use and here as well you've got
to make sure that you that's when you're making the video if you've got the video
and you can also compress it using third-party software so being able to
just take the video changes format changes size and resolution etc but you
need to keep an eye on artifacting so this is where you can press something
too much and you can use a lot of visual data and audio data as well which makes
the image just look really bad and just not really what anyone wants to see it's
not very quality you're losing that information and data there so it's going
on from there this is a bit where we want to start looking at when future
weathers and then quite exciting what's the interview taking off really
popular at the moment is integrating 360 a lot more and so
three-sixty term that's been around for a while and it seems to have been
calling now is kind of a all-encompassing word for 360 static
images videos like to reality are kind of elements and so some people might or
ABC in through 60 back release that I use things like flash integration where
you can manually take every aspect where every angle of a room and then stitch it
all together and then output it through something
like flash and then the user could click and drag and you every perspective just
case no one as I should see that we've got a quick example since it's row we've
got a 3d rendered world and you can see you've got every view in aspects so that
could be whatever you want it to be yeah and then going on from there this is
actually an example of the unbounded flat image I want to show this cuz even
though the actual output is that whole 3d aspect is really important to
remember that either to video or a panoramic or whatever image is it is
still being saved as them at this unbranded flat element so it's still
pretty straightforward in that aspect and the upgrades actually was creating
that and losing potentially and so in the member we're seeing a lot more uses
of these and it's becoming really popular again we believes through uses
of things like smartphones and the whole technology being a lot more accessible
and affordable for people and so first example for this is a static clear image
this is just what Google's actually calling it and that can abortion and
their Apple or their own version as well but we're finding just those natively
offering this service built-in so people have got the ability to take static
sphere images from their phone an example of this is something like Google
Street View so it would find this exact address on Google Street View we could
take a photo of this rooms that experie 8 use I found a few generators to the
image and then we can upload that to Google Street View so then you guys can
look at this location actually ca-360 of this room going up
from there you've got the ability to do videos this is way to use this is an
example of what Samsung offer got the middle range product product this
essentially is just a quick camera device where we've gone click the photo
you take 360 image or you can hold it down and recall and loop so rather than
having just a static image to click and drag you can actually have recorded
element that's what we're seeing a lot more now if you have a record at least
you can actually add interactive elements to it using things like
JavaScript so one example is if we have a university campus you could give your
potential students of really immersive experience by showing them a campus tour
you can have things like students walking around you guys have those
people clickable so once you click them a testimonial come up a student so
things that allow it's really quite exciting that we can add this kind of
elements to it going above that we've got technology there's a lot more higher
end but this is a lot more better quality cameras essentially that we
could shoot a live like 4k 360 so we have it set up in his room and anyone
can come in see every angle completely live let's justwell think as well with
with live feeds you've got a lot of potential to create some really
immersive content so I've seen interviews done before now one that
springs to minus one from Michelle Obama and where she sat down and had a
traditional style interview which is where she was just with the interviewer
and she was just at sat next to him and and they're just having an interview but
it was all filmed in 360 so you got to see everyone behind the scenes as well
so you saw Michelle Vaughn's security the guy prompting the interviewer the
lighting guys the camera guys and everything but it gave this really
immersive feeling and you were just like a fly on the wall which just means what
they were saying a lot more and the message came across a lot better and was
more immersive yes providing really good content there as the word touch number
four about adding the interactive elements that sort and we using Java
Script basically import and later on interactive passports so
some of you may be aware that it's kind of bringing back hot spots PC users
quite a few years ago just for adding clickable elements or mapping areas onto
a 2d image and so you use the coordinates of that image just like the
novelty latitude of a map and you actually like plot out your area so you
might ask where on another door that you can make a clickable and so you
basically start bringing these back actually now to put onto the 360 video
elements so we can add those interactive layers so if we went back to that exam
pressure before this is all a flatlander of that webs so just with this you
actually have your 360 absolute have your M your coordinates and that's where
you can map out so the planet for example we can make a big clickable
element like and then take you to that planet just as a example and that's the
whole idea this is is taking existing technologies and kind of ideas and
bringing them all together now to really enhance and make this really engaging
immersive experience through video and we think it's really coming together now
through that accessibility through the different technologies are available and
the whole thing with mobile share and data that people just go to share this
experience a lot free and it's getting a lot more traction so one example is
great is this new Google campaign we've come across it's a Google Apps culture
campaign it's the campaign to raise awareness for the national parks in
America typically areas that don't get a lot of traffic so like little hidden
gems particular areas that you might need to go into go to see so they create
this campaign to create real immersive experience to actually take you there
and kind of encourage you and want you to visit physically and through this 360
immersive experience so to show you a quick example so the first element there
is a video introduction but we'll just skip that just kind of show you the next
layer you then come to an NH active web page where you've got your different
national parks and you can essentially choose one so for the virtues of Bryce
Canyon Phenix
you know rock formation with this sorry some jungle says it's all part morass
Republic's cannot impose our tranqer oh yeah I feel ya I'm journeyman expert man
highness please so after that video you then come to
this 360 recording subset which means soon we'll be able to see a night of
pristine darkness say pretty so much light pollution that in most places you
can't look on the nighttime side understand your place of the English we
don't have a problem here Freddie ah let's take a look so that's just one
element and then econ it invites you to take a look at the night sky well then
go through to there and so in the game we've quite recorded 360 experience of
the night sky and this is quite cool example when I'll show you because it's
got real real interactive elements and quite different quite an educational
experience actually as well it's pretty interesting join em you con map super
cool so yes same again I've got two days three six experience and they just made
certain prints interactive so we can go and learn more about the Big Dipper
yeah we really like gun booklets really it's kind of highlight everything we
talked about today and quite succinct for that kind of
engaging immersive experience yeah and one of the really cool things about that
is that it is a complete frame complete window experience so you've got the full
screen experience there without it being supported by any other text it isn't it
isn't a sideline it is the main focus and that makes the the content really
engaging in the messaging really engaging as well of course they've got
the controls at the bottom there where you can get you subtitles and everything
else and you play pause button and but I just think that's a really fantastic
campaign that they're doing that yes to recommend to check that out as
well so going on from that the next step is kind of quite frightening as well is
using VR and essentially all the ability that we've got that is quite
transferable to using get kabir so the first and probably the main one that
everyone will have heard of is the oculus rift so what you've got here is a
headset which has a screener and some headphones as well which pop it on the
head and you've got that immediate quite immersive experience and as well you've
got the HTC vive which is a bigger set up in a bit more of a apparently the
better Rick and sees other handheld devices which I know you can get for the
oculus but the vibe also has cameras that you have to put in a room in the
corners of the room to make sure it knows where you are so both of these
setups are quite expensive you need a decent computer as well to run them it
can't run off like a Mac or something and you need a big PC and as well these
are expensive just on their own so I think the vibe is 150 note 750 pounds
their whereabouts and the oculus is probably somewhere near as well so
you've got a cheaper example which is a Google cardboard so yep there it is
great an example and obviously going on from
that it always seems like quite a big jump basically the idea and what if
Google's trying to show with the Google car boards being a genius
it's essentially taking that VR experience and just making it really
affordable accessible essentially everything you need is a smartphone they
actually release the Google cardboard plan we free available on the Google
site or you can buy a prebuilt one so yeah essentially you just rock phone in
and it will give you that immersive 360 kind of experience through a virtual
reality so we take things like a 360 video so YouTube or by default will
actually show any 360 videos for the ability to show it through a Google
cupboard so if you watch them all in your browser you might see the little
Google cardboard icon and you can click that drop in a cardboard and then you
see this real virtual reality experience and the different levels as well and
that Google example I'll show you if you would watch it on your mobile rather
than having to click and drag to see the different perspectives of a mobile
you're just changing the position and I get that kind of augmented view about
the kind of element that we all crosses that barrier makes it really immersive
but yes I think that kind of scribe scientists going to see a lot more of
this in the future and see in that transition become a lot smoother as well
I think would have stopped seeing that mobile experience get really enhanced
through technology for this yeah and if you can get your hands on all those
definitely go ahead there are like 5 pounds off Amazon all or whatever and it
can just really break down that wall between just what you think you can do
with 360 and VR and and what you actually can as well there's some really
cool demos you can get you on your phone so long so let's to conclude and
hopefully we've put on some key considerations and things that sometimes
get missed from the common uses that we see today and have really touched on
things that we're going to see a lot more in the future as well we'll start
seeing 360 video being used for different kind of campaigns and
hopefully I could do some ideas for how to use it yeah thank you
yay sister so yeah okay well things why I have to
see is when sex is the mobile just change the decision like an appointment
did you back with an editor that will cross that barrier makes it really
really yes it's quite funny miss can see a lot more this in the future and seeing
that transition got a lot of lubricant I think will dissociate Matt Murdock
spirit with the enhanced through technologies by this yeah and if you can
get your hands on one of those definitely go ahead there in like five
pounds off Amazon all or whatever and it can just really break down that wall
between just what you think you can do is 360 MVR and and what you actually can
as well there's some really cool demos engaño on your phone so on yeah include
hopefully put some key considerations and things that sometimes get missed
from the colonies is that we see today and we touched on things that we're
going to see a lot more in the future as well we'll start seeing a 360 video
being used different kind of campaigns and hopefully I could do some ideas but
how to use it yeah
Không có nhận xét nào:
Đăng nhận xét