zoukankan      html  css  js  c++  java

  • video from html5

    掌握HTML5中的多媒体--视频(video)

    除非你一直生活在一个偏远的岛屿上,过去一年左右的时间,你应该已经听说过HTML5的各式炒作。HTML5将重塑富Web应用的未来。

    下面 Figure 1的示例展示了HTML5中video标签与传统的object标签的不同.

    Figure 1

    1.  <section>

    2.      <h1>使用HTML5的video标签播放视频</h1>

    3.      <videosrc="video1.mp4">

    4.      </video>

    5.  </section>

    6.  <section>

    7.      <h1>使用Flash插件播放视频</h1>

    8.      <objecttype="application/x-shockwave-flash"

    9.                 data="player.swf"width="290"height="24">

    10.        <paramname="movie"value="player.swf">

    11.    </object>

    12.</section>

    那么重要的是什么呢? 这两个示例很简单,也易于实现。因为<视频>标记是一个用来播放媒体的标准, 你不必猜测浏览器是否要安装特定的某个版本插件。这个标准正是HTML之前最为缺少的那部分。

     

    HTML5支持的媒体格式

    HTML5支持AAC, MP3 和 Ogg Vorbis三种音频格式，以及Ogg Theora, WebM 和MPEG-4三种视频格式.

    但并不是所有浏览器都支持所有的格式。如下表：

    Figure 2浏览器支持的媒体格式

    浏览器

    视频格式

    音频格式

    Ogg Theora

    H.264

    VP8 (WebM)

    Ogg Vorbis

    MP3

    Wav

    Internet Explorer

    手动安装

    9.0

    手动安装

    No

    Yes

    No

    Mozilla Firefox

    3.5

    No

    4.0

    Yes

    No

    Yes

    Google Chrome

    3.0

    No

    6.0

    Yes

    Yes

    Yes

    Safari

    手动安装

    3

    手动安装

    No

    Yes

    Yes

    Opera

    10.50

    No

    10.60

    Yes

    No

    Yes

     

    使用视频标签<video>

    在HTML5中播放视频，直接使用<video>标签就可以了, 如下所示:

    1. <videosrc="video.mp4"controls/>

    src属性 (http://www.w3.org/TR/html5/video.html#the-source-element) 设备要播放视频的名称(可以多个), control的布尔值用来调整是否显示播放控制栏. 完整的属性列表如下所示:

    Figure 3视频相关的属怀

    属性

    值

    描述

     Muted

    Muted

    定义的音频的初始状态.目前仅支持muted.

     Crossorigin


    定义当前视频是否是一个跨域的项目.

     Mediagroup

    ID

    将多个视频或音频集合在一起，并结合MediaController实现同步控制.

     Autoplay

    Autoplay

    如果指定，视频会在准备好(如已取得可播放视频)后自动播放.

     Controls

    Controls

    添加播放控制及音量控制功能栏.

     Height

    Pixels

    指定播放器的高度，以pixel为单位.

     Loop

    Loop

    如果指定，视频将重复播放.

     Poster

    url

    指定视频的预览图.

     Preload

    Preload

    如果指定，视频会在加页面加载过程中被加载。当Autoplay被指定时，会被忽略。

     Src

    url

    目标视频的URL.

     Width

    Pixels

    指定播放器的宽度，以pixel为单位.

     

    下面是一使用了多个属性的示例，也包括一个备用(fallback)的错误信息(当浏览器不支持video标签时显示).

    1.  <videosrc="video.mp4"width="320"height="240"autoplaycontrolsloop>

    2.      Your browser does not support the video tag.

    3.  </video>

     

    你也可以使用MIME指定视频的编码格式，如下：

    1.       <!-- H.264 Constrained baseline profile video (main and extended video compatible)

    2.         level 3 and Low-Complexity AAC audio in MP4 container -->

    3.       <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

    4.       <!-- H.264 Extended profile video (baseline-compatible) level3 and Low-Complexity

    5.         AAC audioin MP4 container -->

    6.       <source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>

     

    你也可使用JavaScript来设定这些属性. 如下面的代码示例:

    <!—显示控制栏的三种方式-->

    <videocontrols>

    <videocontrols="">

    <videocontrols="controls">

    // JavaScript中显示控制栏的两种方式

    video.controls = true;

    video.setAttribute

           ('controls',

            'controls');

     

    如果无法确定目标浏览器是否能支持<video>或者你的视频格式，你最好指定一个回退的信息，以告诉用户为什么没有到期望的内容。如下所示：

    1. <videocontrols>

    2.     <sourcesrc="video1.mp4"/>

    3.     <sourcesrc="video1.ogv"/>

    4.     <sourcesrc="video1.webm"/>

    5.     <p>This browser does not support HTML5 video</p>

    6. </video>

     

    如果你要确保视频可以被播放，你可以按照以前的方式加入一个flash的object标签,如下：

    1. <videocontrols>

    2.     <sourcesrc="video1.mp4"/>

    3.     <sourcesrc="video1.ogv"/>

    4.     <sourcesrc="video1.webm"/>

    5.     <objectdata="videoplayer.swf">

    6.         <paramname="flashvars"value="video1.mp4">

    7.         您的浏览器对HTML5 Video 和 Flash 都不支持

    8.     </object>

    9. </video>

     

    也可以在JavaScript中使用canPlayType来检测浏览器是否可以播放某个格式的视频：

    1.       var video = document.getElementsByTagName('video')[0];

    2.       if (video.canPlayType)

    3.          { //支持video标签

    4.       if (video.canPlayType('video/ogg; codecs="theora, vorbis"'))

    5.             { // it may be able to play

                  }

    6.               else

    7.             {// the codecs or container are not supported

    8.               fallback(video);

    9.         }

    10.      }

     

    如果希望有更明确清晰的提示，可以使用onerror事件监听器来报告一个错误：

    1.       <video src="video.mp4"

    2.              onerror="fallback(this)">

    3.              不支持<video>

    4.       </video>

     

    使用poster,你可以在video播放区域显示一张图片来替代，它可以用来显示视频的预览图。下面是一个示例:

    1.       <video src="video1.mp4" poster="preview.jpg"</video>

     

    最后，使用JavaScript和HTML,你就可以创建一个交互性的视频播放器。Figure 4 展示如何使用JavaScript添加一个video并响应用户的控制操作.(译注:比如Youtue就是采用动态创建video控件的方式来提供视频播放功能的。)

    Figure 4 JavaScript对视频的控制

    1.       var video = document.createElement('video');

    2.       video.src ='video1.mp4';

    3.       video.controls =true;

    4.       document.body.appendChild(video);

    5.       var video = new Video();

    6.       video.src ='video1.mp4';

    7.       var video = new Video('video1.mp4')

    8.       <script>

    9.           var video = document.getElementsByTagName('video')[0];

    10.      </script>

    11.      <inputtype="button"value="Play"onclick="video.play()">

    12.      <inputtype="button"value="Pause"onclick="video.pause()">

     

    完整的事件和特性列表，参考http://www.w3.org/TR/html5/video.html#playing-the-media-resource.

    译注: 作者的代码可能会让你有些疑问。看的时候，要注意分辨作者可能是使用多种方式来实现同一个功能。以最后一个代码为例，其中5~7行是1~2行的另两种写法。 

    以下是一份动态加入video元件，并可以控制静音的功能示例:

    *muteVideo是静音状态切换函数

    *playVideo函数在没有video控件时会添加一个控件，如果已经存在就播放。

    [javascript] view plaincopyprint?
    1. function addSourceToVideo(element,src,type)  
    2. {  
    3.  var source = document.createElement('source');  
    4.  source.src = src;  
    5.  source.type= type;  
    6.    
    7.  element.appendChild(source);  
    8. }  
    9.   
    10. function insertVideo(src,type,width,height)  
    11. {  
    12.  var vid = document.createElement("video");  
    13.    
    14.  vid.controls="controls";  
    15.  vid.width = width;  
    16.  vid.height=height;  
    17.  vid.id = "video_control";  
    18.     vid.muted= false;  
    19.    
    20.  addSourceToVideo(vid,src,type);  
    21.    
    22.  document.getElementById("show").appendChild(vid);  
    23. }  
    24.   
    25. function muteVideo()  
    26. {  
    27.  var vid = document.getElementById("video_control");  
    28.    
    29.  if(vid == undefined)  
    30.  return;  
    31.    
    32.  if (vid.muted==undefined || !vid.muted)  
    33.  {  
    34.  vid.muted = true;  
    35.  }  
    36.  else  
    37.  {  
    38.  vid.muted = false;  
    39.  }  
    40. }  
    41.   
    42. function playVideo()  
    43. {  
    44.     var video = document.getElementById("video_control");  
    45.       
    46.     if(video==undefined)  
    47.     {  
    48.      insertVideo("files/happyfit2.mp4","video/mp4",604,256);  
    49.      video = document.getElementById("video_control");  
    50.     }  
    51.   
    52.  video.play();  
    53. }  
    function addSourceToVideo(element,src,type)
{
 var source = document.createElement('source');
 source.src = src;
 source.type= type;
 
 element.appendChild(source);
}

function insertVideo(src,type,width,height)
{
 var vid = document.createElement("video");
 
 vid.controls="controls";
 vid.width = width;
 vid.height=height;
 vid.id = "video_control";
    vid.muted= false;
 
 addSourceToVideo(vid,src,type);
 
 document.getElementById("show").appendChild(vid);
}

function muteVideo()
{
 var vid = document.getElementById("video_control");
 
 if(vid == undefined)
 return;
 
 if (vid.muted==undefined || !vid.muted)
 {
 vid.muted = true;
 }
 else
 {
 vid.muted = false;
 }
}

function playVideo()
{
    var video = document.getElementById("video_control");
    
    if(video==undefined)
    {
     insertVideo("files/happyfit2.mp4","video/mp4",604,256);
     video = document.getElementById("video_control");
    }

 video.play();
}

    原文地址:Working with Media in HTML5
  • 相关阅读:
    js动态获取地址栏后的参数
    html页面保存数的两种方式
    微信开发之八 页面获取周围beacon设备
    【摄影】田子坊
    最好的时光在路上，最美的风景在远方
    【前端统计图】echarts实现简单柱状图
    js实现计时功能
    luogu 电车
    cogs luogu 砍树
    cogs 通往奥格瑞玛的道路 WD
  • 原文地址：https://www.cnblogs.com/webzhangnan/p/2713379.html
Copyright © 2011-2022 走看看