how to display media in html

1###                         How to display Media with html                         ###
2_______________________________________________________________________________________
3
4
5
6
7
8
9_________________________________________________________________________________________
10
11###                         Image(s)                         ###
12
13
14### You can easily add a img with this line of code :
15<img src="Type here the location of your picture" />
16
17### But you can also add a style to it like this :
18<img src="Type here the location of your picture" class="type here the name of your style" />
19
20### If you don't know how to make a style? i will be maybe uploading a tutorial on it later 
21
22
23### If you want to keep it easy and not add a style you can also add details in the command itself
24### like this :
25<img src="Type here the location of your picture" width="type here a amount of pixels" />
26
27### if you really want to customize it than i would recommend using a style
28
29
30
31## Here is an example i made:
32<img src="src/picture_beach.jpg" class="pictures" />
33
34________________________________________________________________________________________
35
36###                         Video(s)                         ###
37
38
39### adding video(s) is somewhat more complicated than adding image(s) here is the basic way :
40<video controls>
41
42    <source src="Type here the location of your video" />
43</video>
44
45### To video(s) you can also add a style like this :
46<video controls class="Type here the name of Your style">
47
48    <source src="Type here the location of your video" />
49</video>
50
51### If you don't know how to make a style? i will be maybe uploading a tutorial on it later 
52
53
54
55### you can also customize the video without using a style easily
56<video controls autoplay poster="Type here the location of a picture for a thumbnail if you don't want one than don't put poster here">
57    
58    <source src="Type here the location of your video" />
59</video>
60
61### If you want to autoplay the video than type autoplay where i put it. If you don't want autoplay just don't put it there
62
63
64
65## Here is an example i made:
66<video controls autoplay poster="/img/beach.png">
67    
68    <source src="/video/sea.mp4" />
69</video>
70
71_______________________________________________________________________________________
72
73###                         Audio(s)                         ###
74
75
76### Adding a audio file is almost the same as adding a video file here is the basic code line :
77<audio controls >
78
79    <source src="Type here the location of your audio" />
80</audio>
81
82### just like adding a style to video(s) its done like this :
83<audio controls  class="The name of your style" >
84
85    <source src="The location of your audio" />
86</audio>
87
88### If you don't know how to make a style? i will be maybe uploading a tutorial on it later 
89
90
91
92### You can customize the audio if you don't want to use a style very easy
93<audio controls autoplay loop preload="" >
94
95    <source src="The location of your audio" />
96</audio>
97
98### "autoplay" = It will play automaticly when you go to the html page
99### "loop"     = If you add this the file will never stop playing. when it ends it will start over again
100### "preload"  = You have 3 types of preloading. 1="auto" It will automaticly load. 2="metadata" It will load before the metadata. 3="none" It will just load 
101### like it normaly does
102
103### You can also add above or under the line <source> the words: "Your Browser does Not support This music File. Please Try another browser"
104### You just have to add the text nothing else and it will display when the audio file can't load. 
105
106
107
108## here is an example i made:
109<audio controls autoplay loop preload="metadata" >
110    <source src="/audio/audiofile3904.mp3" />
111    Your Browser does Not support This music File. Please Try another Browser
112</audio>
113
114_______________________________________________________________________________________
115
116# If this code helped you please leave a like on it. If you want to see more of this follow me
117# Or just take a look at another answer of my answers
118#
119# THIS CODE HAS BEEN MADE BY : Vast Vicuña
120
121
122
123