1.检测浏览器是否支持html5视频播放

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <script type="text/javascript">

 function checkVideo()

 {

 if(!!document.createElement('video').canPlayType)

   {

   var vidTest=document.createElement("video");

   oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');

   if (!oggTest)

     {

     h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

     if (!h264Test)

       {

       document.getElementById("checkVideoResult").innerHTML="您的浏览器不支持HTML 5视频播放！"

       }

     else

       {

       if (h264Test=="probably")

         {

         document.getElementById("checkVideoResult").innerHTML="您的浏览器支持HTML 5视频播放！";

         }

       else

         {

         document.getElementById("checkVideoResult").innerHTML="您的浏览器支持部分HTML 5视频播放！";

         }

       }

     }

   else

     {

     if (oggTest=="probably")

       {

       document.getElementById("checkVideoResult").innerHTML="您的浏览器支持HTML 5视频播放！";

       }

     else

       {

       document.getElementById("checkVideoResult").innerHTML="您的浏览器支持部分HTML 5视频播放！";

       }

     }

   }

 else

   {

   document.getElementById("checkVideoResult").innerHTML="您的浏览器不支持HTML 5视频播放！"

   }

 }

 </script>

 <title>3.3.1</title>

 </head>

 <body>

 <div id="checkVideoResult" style="margin:10px 0 0 0; border:0; padding:0;">

 <button onclick="checkVideo()" style="font-family:Arial, Helvetica, sans-serif;">检测</button>

 </div>

 </body>

 </html>

2.视频里面的标签

    1. autoplay 自动播放视频文件

 <audio scc=".ogg .mp4 .webm" autoplay></span>

2.preload  预加载。提供三个可供选择的值：none表示不进行预加载；metadata表示仅加载元数据，即音频文件的大小、第一帧、播放列表和持续时间等；auto表示预加载全部音频文件

<audio scc=".ogg .mp4 .webm" preload=”metadata”></audio>

3.poster元素

设置当前元素不可用时，可以向用户展现一副图片

<video scc=".ogg .mp4 .webm" poster=“.jpg”></video >  

4.loop元素

设置是否循环播放视频文件

<video scc=".ogg .mp4 .webm"  loop></ ideo >

5.controls属性

设置是否添加浏览器自带的播放控制器，其中包括播放、暂停、声音等。如果需要显示播放控制器，则添加该属性

<video scc=".ogg .mp4 .webm"  controls></video >

6.width属性和height属性

设置视频的宽度和高度

<video scc=".ogg .mp4 .webm"  width=””  height=””></video >

7.muted属性

设置页面加载时，播放器是否被静音。

3  vioeo/audio方法标签

1、play方法

除了播放器自己的播放功能外，用户还可以在脚本中使用play方法来控制音视频的播放功能

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>3.5.1</title>

 <script>

 function play()

 {

     var video=document.getElementById("MyVideo");

     video.play();

 }

 </script>

 </head>

 <body>

 <video id="MyVideo" src="movie.mp4" controls></video>

 <button onClick="play()">play</button>

 </body>

 </html>

显 示

2.pause方法

与play方法对应的pause方法用于设置暂停播放音视频功能，pause方法也需要在脚本中设置才能使用

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>3.5.2</title>

 <script>

 function pause()

 {

     var video=document.getElementById("MyVideo");

     video.pause();

 }

 </script>

 </head>

 <body>

 <video id="MyVideo" src="movie.mp4" controls></video>

 <button onClick="pause()">pause</button>

 </body>

 </html>

3.load方法

调用该方法可以重新加载音视频文件进行播放

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>3.5.3</title>

 <script>

 function load()

 {

     var video=document.getElementById("MyVideo");

     video.load();

 }

 </script>

 </head>

 <body>

 <video id="MyVideo" src="movie.mp4" controls></video>

 <button onClick="load()">load</button>

 </body>

 </html>

4.canPlayType方法

该方法用于检测浏览器是否支持指定的类型，并返回结果。如果返回空字符串则表示浏览器不支持此种功能

4.打开页面后，视频开始循环播放，当暂停时，在视频上方出现一个图片遮挡

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>3.4.1</title>

 <script>

 var video;

 var img;

 function init()

 {

     video=document.getElementById("MyVideo");

     video.style.position="absolute";

     video.style.width="400px";

     video.style.height="300px";

     video.style.left="50px";

     video.style.top="50px";

     img=document.getElementById("MyImg");

     img.style.position="absolute";

     img.style.width="340px";

     img.style.height="160px";

     img.style.left="80px";

     img.style.top="120px";

     img.style.zIndex=2;

     img.hidden=true;

 }

 function showImg(flag)

 {

     img.hidden=flag;

 }

 </script>

 </head>

 <body onLoad="init()">

 <video id="MyVideo" loop autoplay src="movie.mp4" controls onPlay="showImg(true);" onPause="showImg(false);" ></video>

 <img id="MyImg" src="MyImage.png" />

 </body>

 </html>

显示结果

HTML5视频播放的更多相关文章

  1. 打造自己的html5视频播放器

    前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签 ...

  2. html5 视频播放

    html5 视频播放 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器

    最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...

  4. HTML5视频播放插件 video.js介绍

    video.js是一款很流行的html5视频播放插件.很适合在移动端播放视频(比如微信网页),功能强大,且支持降级到flash,兼容ie8.官网:http://videojs.com/    git& ...

  5. html5视频播放器 二 （功能实现及播放优化）

    样式改写css,其中的一些按钮是在“阿里妈妈”上找的字体图标,就不向上传了. /* *CoolPlay视频播放器 * 2016年8月1日 * 627314658@qq.com * */ @font-f ...

  6. html5视频播放器 一 （改写默认样式）

    一个项目用到了html5视频播放器,于是就写了一个,走了很多坑,例如在chrome中加载视频出现加载异常等 先看看效果 是不是感觉换不错,以下是我播放器改写样式的布局. <!DOCTYPE ht ...

  7. html5视频播放插件

    对于HTML5提供的新特性,给前端开发者带来了巨大的激情与动力,减轻了开发者的代码累赘,大大提高了网站性能以及网页的渲染效果.对于低版本的浏览器,由于生产厂商的原因,许多PC端低版本的浏览器还不兼容H ...

  8. html5 视频播放插件

    HTML5中加入了浏览器非常友好的标签 <video> ,这个标签非常的厉害,它可以不依靠falsh播放器,在网页中播放视频,目前W3C提供的video只支持mp4,ogg,webm三种视 ...

  9. html5视频播放解决方案

    关键词:html5  nativeapp webapp mp4 H.264 html5没学习之前总觉的很神秘.近期通过学习和研究html5有点成果,特总结分享给大家.众所周知应用开发分两种:一是原生的 ...

随机推荐

  1. 今天在在linux环境下 管理自己的php项目时 删除一个分类 结果报了一个Table表名 doesn’t exist

    在百度上查了 一下  发现是是大小写的问题  在此分享一下

  2. 在Cortex-M系列上如何准确地做us级延时？

    前几天刚好同事问起在Cortex-M上延时不准的问题,在网上也没找到比较满意的答案,干脆自己对这个问题做一个总结. 根据我们的经验,最容易想到的大概通过计算指令周期来解决.该思路在Cortex上并不是 ...

  3. Linux初学：（一）Linux概述

    Linux各个目录的结构介绍 Linux系统以目录的方式来组织和管理系统中的所有文件.Linux系统通过目录将系统中的所有的文件分级.分层组织在一起,形成了Linux文件系统的树形结构层次.以根目录“ ...

  4. Linux find命令的用法实践

    一.find命令简介 Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.由于find具有强大的功能,所以它的选项也很多,其中大 ...

  5. [Django]下拉表单与模型查询

    前言:本文主要针对自定义下拉表单制作,下拉表单的内容是取至于数据库,即动态实现下拉表单 正文: 动态实现下拉表单有两种方法: 一.自己手动写 html 模板中的 <form ...> &l ...

  6. Java连接程序数据源

    在实际应用中,可能需要根据表名动态地改变数据源,比如在程序数据集中,通过传进的表名参数,到数据库取出对应的表作为数据源.例如,FineReport是通过AbstractTableData抽象类来读取数 ...

  7. Web报表工具FineReport的JS API开发（一）

    很多报表软件可以利用JS接口来实现更多更复杂的功能.以FineReport为例,开放了大量的JS API给用户,根据执行JS的主体不同可以将分为三大类:FR.FS和contentWindow. 在js ...

  8. Neutron 理解 (3): Open vSwitch + GRE/VxLAN 组网 [Netruon Open vSwitch + GRE/VxLAN Virutal Network]

    学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...

  9. Dialog详解（包括进度条、PopupWindow、自定义view、自定义样式的对话框）

    Dialog详解(包括进度条.PopupWindow.自定义view.自定义样式的对话框)   Android中提供了多种对话框,在实际应用中我们可能会需要修改这些已有的对话框.本实例就是从实际出发, ...

  10. 【转】【C#】C# 5.0 新特性——Async和Await使异步编程更简单

    一.引言 在之前的C#基础知识系列文章中只介绍了从C#1.0到C#4.0中主要的特性,然而.NET 4.5 的推出,对于C#又有了新特性的增加--就是C#5.0中async和await两个关键字,这两 ...