onlyforbopi
9/24/2018 - 12:54 PM

JS.AudioVideo.VideoLoadingExample.js

JS.AudioVideo.VideoLoadingExample.js

js-audiovideo-videoloadingexample-js.markdown
content_copyfile_download
  • Rendered
  • Source

JS.AudioVideo.VideoLoadingExample.js

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<!DOCTYPE html> 
<html lang="en">
<head>

<!----
<video width="320" height="240" controls="controls">
   <source src="movie.mp4" type="video/mp4" />
   <source src="movie.ogg" type="video/ogg" />
   Your browser does not support the <video> element.
</video>
Please note that:

The controls attribute indicates that a control panel with play/stop/volume/progress widgets should be displayed;
Usually the browser  will use the first format it recognizes  (in this case, the browser checks whether mp4 is supported, and if not, it will check for the ogg format, and so on). Some browsers may use a different heuristic and choose a "preferred" format.
The <video> element is a DOM member, so  CSS styling can be applied, as well as manipulation using the DOM API.
You will learn more about the different attributes of the <video> element later on in the course.

RESTRICTION: You cannot embed a YouTube or a Daily Motion video using the <video> element
Help! <video src="my youtube video URL"></video> does not work! 

BEWARE: you cannot directly embed videos from most of the popular social Web sites such as YouTube, Dailymotion, Vimeo, etc. For commercial reasons, and because advertising is automatically  added to the videos, these Web sites do not allow "regular" embedding of their videos.

While they use HTML5 to render their videos, these hosting sites (YouTube, etc.) use rather complex techniques in order to prevent you from using them with the <video> element. Instead, you often need to embed an <iframe> that will render the HTML5 videos in your Web site, and of course, the advertising that comes along with them.

Usually you have an "embed" button close to the videos that prompts you with some HTML code that you can copy and paste for embedding.

An example using YouTube:

Here is the HTML code you need to copy and paste in order to embed a video (in this case, a tutorial that tells you how to embed a YouTube video):

<iframe width="560" height="315" src="https://www.youtube.com/embed/ZH1XOsv8Oyo" frameborder="0" allowfullscreen></iframe>
Below is the YouTube video embedded in this page using the above code: it's HTML5 but it's not a <video> element directly inserted in the HTML of this page - it's an <iframe>.




----->

  <meta charset="utf-8">
<title>Video/Canvas Demo 0</title> 
  <style> 
video {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -180px 0 0 -240px;
}
</style> 

</head>
<body>
<!-- <video> tag, with the @controls attribute
     giving it the play/pause/seeker controls. Try removing the controls attribute, 
     adding autoplay or loop -->
<video controls autoplay> 
	<!-- I have three versions of the video encoded with
	     different codecs.  The browser will automatically
	     choose the first one it knows it can play. --> 
	<source src=http://html5doctor.com/demos/video-canvas-magic/video.webm type=video/webm> 
	<source src=http://html5doctor.com/demos/video-canvas-magic/video.ogg type=video/ogg> 
	<source src=http://html5doctor.com/demos/video-canvas-magic/video.mp4 type=video/mp4> 
</video> 
<!-- That's it!  You now have video playing in your browser! --> 
 

</body>
</html>