Skip to content

HTML5 Video #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

HTML5 Video #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
989309c
Update README.md
WhitePeachTea Oct 3, 2017
cb47b13
Update a-tag-tutorial.html
WhitePeachTea Oct 3, 2017
6b8f517
Update tutorial.css
WhitePeachTea Oct 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 42 additions & 16 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,58 @@
# Understanding `a` tags in HTML
# Adding audio and video in HTML

The `a` tag is a fundamental HTML element responsible for much of the linking goodn ess that makes HTML great!
Videos and audios make your website more interesting:)

## Components
Let's take a quick look at how the tag works:
This tutorial is to teach you how to use the `video` and `audio` tag.

So you could add more contexts to your website.

## What is a HTML5 Video?
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

try to correct small erros like "a", which should be "an" here.


<a href="https://en.wikipedia.org/wiki/HTML5_video">What is a HTML5 Video</a>

In past, We used plug-in tool such as <a href="https://en.wikipedia.org/wiki/Adobe_Flash_Player">Adobe Flash Player</a> to play video in website.
But Flash is history now,
Today we use HTML5 <audio> and <video> element to embed a video in a web page.

This is a example for code to add a <video> or <audio> in HTML.

``` html
<video width="320" height="240" controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
```

As in any codes, there's a basic structure. Tags `width="" height=''` adjust the side of containers of video.

``` html
<a href="sourceurl">Displayed Text</a>
<video width="320" height="240" controls>
```

As in any tag, there's a basic structure of ```<tag attr="value">content</tag>```. The fantastic, amazing attribute in the `a` tag is `href` -- short for "hypertext reference". The `href` attribute identifies a target URL; when this HTML snippet is displayed in a browser, the browser will direct you to the URL in the href attribute. Let's try it out:
The tag `autoplay` allows video to play automatically once the website opened

``` html
<a href="https://google.com">Google Owns All Your Data</a>
<video width="320" height="240" autoplay>
```

<a href="https://google.com">Google Owns All Your Data</a>
The `source` tag tell the browser to find the video from the link address you provided.

As with most HTML tags, the `a` tag accepts a number of possible attributes. Some of them are used only rarely, but you will often see the `target` attribute in the real world. THis allows you to specify where to open the link you click on:
- `_self` means "open here"
- `_blank` means "open in a new tab"
- `_parent` means "if you're looking at an [internal frame](https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe), open this link in the frame's arent tab. Otherwise, just open here like in `_self`
``` html
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">>
```
The `type` tag identifies the format of the video.

## Try it yourself
``` html
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
```

You can clone this repository and load a local copy of [the tutorial page](./a-tag-tutorial.html) in your browser to see the tag in action. Then make some changes to the file to learn this yourself!

## Learn More

The [Mozilla Developer Network](https://developer.mozilla.org/en/docs/Web/HTML/Element/a) has lots more detail about this and every HTML tag!
## Youtube Video

In most situations, you would add youtube videos to your website. It is diffcult to add a youtube video by using <video> code.There is more simple way to add a youtube video.

Right click to select the "copy the embed code" option.You get codes with tag <iframe>. The <iframe> tag is used to embed another document within the current HTML document.

``` html
<iframe width="854" height="480" src="https://www.youtube.com/embed/LSxElWwWVFE" frameborder="0" allowfullscreen></iframe>
```
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you're going to use this embed ode, you should at least explain what it is. And some more details about why a YouTube video is difficult to add using <video> would really enhance this tutorial quite a bit!

87 changes: 84 additions & 3 deletions a-tag-tutorial.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,97 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>a tag tutorial</title>
<title>a HTML5 <Video> <Audio> tutorial</title>

<link rel="stylesheet" href="tutorial.css">
</head>

<body>
<h2> The simplest possible HTML page </h2>

<div>

<h>A HTML5 &lt;video&gt; &lt;audio&gt; tutorial</h>

<p>By Peng Lei</p>

<h1>Add video and audio to webpage</h1>

<p>Try editing the link and the content in <a href="https://www.google.com">this a tag</a>. It's the miracle of HTML! </p>
<p> It is pretty simple to insert a video or audio to your website as long as you could provide links.</p>

<p>The basic code to add a video is this one.</p>

<p1> &lt;video width="" height="" controls&gt;
&lt;source src="" type=""&gt;
&lt;/video&gt; </p1>

<p>Elements in the code
<ul>
<li>width/height - use to adjust the size of video/audio containers</li>
<li>source - links of video/audio from internet</li>
<li>type (video) - there are 3 supported video formats
<ul>
<li>mp4</li>
<li>webm</li>
<li>ogg</li>
</ul>
</li>
<li>type (audio) - there are 3 supported audio formats
<ul>
<li>mp3</li>
<li>webm</li>
<li>wav</li>
</ul>
</li>
</ul>
</p>

<p>Here is a example.</p>

<p1> &lt;video width="320" height="240" controls&gt;
&lt;source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"&gt;
&lt;/video&gt; </p1>

<video width="320" height="240" controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>




<p> The same goes with &lt;audio&gt;.</p>

<p1>&lt;audio width="320" height="240" controls&gt;
&lt;source src="http://www.noiseaddicts.com/samples_1w72b820/4033.mp3" type="video/mp4"&gt;
&lt;/audio&gt;</p1>


<audio width="320" height="240" controls>
<source src="http://www.noiseaddicts.com/samples_1w72b820/4033.mp3" type="video/mp4">
</audio>

<p> Try it out on <a href=https://jsbin.com/?output>Jsbin<a/>.</p>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

URL of jsbin is missing!


</div>



<div>
<h1> The simplest way to add a youtube video </h1>

<p>Most of the video you need could be find in youtube Channel, and they provided a simplest way to embed to your website by using iframe tag.
</p>
<p> Right click to select the "copy the embed code" option.</p>

<img src="https://help.tallyfy.com/wp-content/uploads/2016/09/embed-youtube-1024x640.png" height="480" width="640">

<p>You get the code like this &lt;iframe width="854" height="480" src="https://www.youtube.com/embed/LSxElWwWVFE" frameborder="0" allowfullscreen&gt; &lt;/iframe&gt;</p>

<p>Paste the code in your HTML and here you go</p>

<iframe width="640" height="480" src="https://www.youtube.com/embed/LSxElWwWVFE" frameborder="0" allowfullscreen></iframe>

</div>

</body>

</html>
83 changes: 81 additions & 2 deletions tutorial.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,85 @@
h {
font-family:Helvetica, Arial, sans-serif;
font-size: 32px;
line-height: 48px;
font-weight: 300;
}


body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

background-color: lightgrey;
}

ul {
font-family: "Times New Roman", Times, serif;
font-weight: 300;
font-size: 18px;
line-height: 48px;
color: black;
}

p1{

font-weight: 300;
font-size: 16px;
line-height: 48px;
color: grey;
}

p {
font-family: "Times New Roman", Times, serif;
font-weight: 300;
font-size: 16px;
line-height: 24px;
line-height: 48px;
color: black;
}



h1 {
font-family:Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 24px;
color: #2f4f4f;
line-height: 48px;
font-weight: 300;
}

div {
width: 1080px;
border: 5px solid #ffeeee;
padding: 25px;
margin: 25px;
background-color: white;
}

p1{
font-family:Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 48px;
color: grey;
}

p {
font-family: "Times New Roman", Times, serif;
font-weight: 300;
font-size: 16px;
line-height: 48px;
color: black;
}

html, body {
height: 100%;
}

html {
display: table;
margin: auto;
}

body {
display: table-cell;
vertical-align: middle;
}