html关于音乐和视频播放整理

最新推荐文章于 2021-06-07 13:34:41 发布

kruskal123

最新推荐文章于 2021-06-07 13:34:41 发布

阅读量1.7k

点赞数

分类专栏： Html javascript

Html 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

javascript

7 篇文章 0 订阅

订阅专栏

--------------------------------------------------------------视频-------------------------------------------------------------------------------------------

这次使用了2种方法对这些视频进行处理：

1、使用ckplayer网页视频播放器

ckplayer可以说是非常好用的网页视频播放器了，代码部署简单，配置容易，但遗憾的是支持的视频格式不是很多，仅支持flv、f4v、mp4等格式。

2、使用window media play网页播放器

对于这个视频播放器，大家应该不陌生，是window系统自带的播放器，个人非常讨厌这个东东，虽然是系统自带的，但基本没怎么用过。

下面是使用widow media play网页播放器播放wmv、mpg、mov、avi等格式视频的代码：

  
     HTML
    
      <video src="demo.mp4" controls autoplay >HTML5 Video is required for this example</video>

对于一行代码，该示例便可完成几个操作。src 特性指向要播放的视频文件。src 特性提供为视频元素指定内容的两种方法之一。若要播放视频，请将 src 特性分配给视频文件的 URL。

controls 特性通知浏览器显示内置的播放控件。各个浏览器之间的内置控件在功能和外观方面可能有所不同。但至少，应包含“播放”和“暂停”控件、进度条或快进或快退视频的按钮以及计时器。视频播放时，通常会隐藏这些控件，然后当用户将其鼠标悬停在播放器上时重新显示这些控件。

最后，autoplay 是一个布尔型特性，该特性导致加载视频后开始播放视频。

我可以将视频元素与哪些特性结合使用？

视频元素支持很多用于控制视频播放和显示的特性。下表重点介绍基本视频特性。如果存在 video 元素的特性，则布尔型特性被视为 "True"，如果不存在，则被视为 "False"。

特性	说明
src	表示指向视频文件的 URL 的字符串。
controls	打开一组内置播放控件的布尔型特性。这通常包括播放、暂停、定位以及设置音量。 Internet Explorer 10 还显示用于选择多个音频和文本曲目的控件。
poster	表示视频播放器中显示的占位符图像的字符串。仅当视频不可用时才显示海报图像，因为此时未设置源或者仍然正在加载内容。
loop	重复重播视频直到按下控件上的暂停按钮或者从脚本调用 pause 方法的布尔型特性。
muted	在关闭音频曲目的情况下播放视频的布尔型特性。
autoplay	在播放器缓冲了足够多的内容之后自动开始播放视频的布尔型特性。
preload	定义需要多少缓冲的提示的布尔型特性。
height	设置视频播放器的高度（以像素为单位）。
width	设置视频播放器的宽度（以像素为单位）。

注意如果仅设置了视频播放器的一个尺寸，例如高度，则视频播放器将视频大小调整到该尺寸并根据视频内容的纵横比缩放其他尺寸。如果将两个尺寸设置为与视频内容不匹配的纵横比，则播放器缩放最接近的尺寸以适应其尺寸，但会保持其纵横比。视频将水平或垂直居中，两侧留有空白区域。

下一示例播放视频、在加载内容之前显示海报、使用播放控件重复播放视频。

    
    HTML
   
     <video src="demo.mp4" controls autoplay loop muted preload="auto" poster="demo.jpg" >
HTML5 Video is required for this example
</video>

可以使用 HTML 在视频元素上设置前面所述的特性，但如果使用 JavaScript 会有更多可用选择。有关详细信息，请参阅使用 JavaScript 控制 HTML5 视频播放器。

如何支持多种格式？

视频元素仅允许一次设置一个 src 特性。如果你知道要使用一种文件格式，则可正常工作。但如果希望支持多种文件格式和多种浏览器，则可以使用 source 元素。

source 元素与视频元素结合使用提供“最适合的”视频内容格式。这意味着，可以指定多种格式并且 HTML5 视频播放器选取最适合的一种格式。对于 Windows Internet Explorer，通常是 .mp4 文件，而对于其他浏览器，通常是 .ogg/.ogv 格式。此示例显示具有三种可能文件格式的视频元素：

    
    HTML
   
      <video controls poster="demo.jpg">
   <source src="demo.mp4" type="video/mp4" />
   <source src="demo.webm" type="video/webm"/>
   <source src="demo.ogv" type="video/ogg"/>             
   <p>Fallback code if video isn't supported</p>/
 </video>

在此示例中，列出了三种格式，— mp4、webm 和 ogg 视频。根据浏览器的不同，视频元素选择它可以播放的一种格式。如果该示例不能播放任何一种格式，或者不支持 HTML5 视频，则该示例失败并显示 video 标记之间包含的文本。此“回滚”行为可以用于显示消息，或者可以包含嵌入的播放器。

在较旧的浏览器上会怎么样呢？

在没有插件或外部播放器的情况下向网页中添加视频，这对于在新 Windows UI 中运行 Internet Explorer 9 或 Internet Explorer 10 的用户或者不支持插件的移动设备上的用户来说非常适合。但可能会使你的受众仅局限于支持现代浏览器的用户。使用视频和音频 HTML5 元素，可以在标记之间放置文本或代码，这些文本或代码仅在用户的浏览器不支持 HTML5 时执行。

注意音频和视频元素不同于画布，因为元素之间的代码仅在不支持这两个元素时才执行。画布的独特之处在于，标记之间的代码虽然不显示，但在支持画布时却实际执行该代码。Canvas Shadow DOM 允许开发人员为屏幕读取器和其他设备提供辅助功能支持。有关详细信息，请参阅 HTML5 Canvas 和 Canvas Shadow DOM。

下一示例与上一示例类似，只是添加了一个对象标记，用于运行 Adobe Flash player 以支持较早版本的浏览器。

    
    HTML
   
      <video controls poster="demo.jpg">
   <source src="demo.mp4" type="video/mp4" />
   <source src="demo.webm" type="video/webm"/>
   <source src="demo.ogv" type="video/ogg"/>     
   <object>
     <embed src="demo.mp4" type= "application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" />
   </object>        
   HTML5 Video is required for this example
 </video>

在此示例中，如果浏览器支持 HTML5 视频，则它会尝试现有的视频格式。如果不支持 HTML5 视频，则会使用对象和嵌入的标记加载 Flash player。

用户回滚的另一选项是仅提供指向视频内容的链接，如此示例所示：

    
    HTML
   
     HTML5 Video is required for this example. 
<a href="demo.mp4">Download the video</a> file.

有关使用 JavaScript 的 Windows 应用商店应用中的回滚技术的详细信息，请参阅插件和 ActiveX 控件。

我可以添加一些样式吗？

可以使用 CSS 设置 HTML5 视频播放器的样式，以帮助将其集成到网页设计中。可以设置 height 和 width；指定背景、边框以及 position；使用 CSS 控制视频元素的 visibility。

使用 CSS 的 z-index 属性，可以在视频元素上叠加图像、文本，甚至其他视频。此内容的一个示例就是画中画 (PiP)，它在同一屏幕中在较大的视频上叠加小视频。

画中画是一种通常用于在体育活动中显示相关内容（图表），或是手语讲解员的技术。以下示例使用 CSS 在较大视频上放置小视频。它还使用 CSS 设置视频播放器的宽度，并且在插入图像的周围放置彩色边框。

    
    HTML
   
   

     
         <style type="text/css">       
    #Video1
    {
     position:absolute;
     top: 50px;
     left:0px;        
     width:1000px;       
     border:2px solid blue;
     display:block;
     z-index:99;
     }
        
   #Video2
    {
     position:absolute;
     top:80px;
     left:60px;
     width:300px;
     border:2px solid red;        
     z-index:100;
    }
    
    </style>
</head>
    <body>        
       <video id="Video1" controls loop autoplay >
           <source src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" type="video/mp4" />           
       </video>
       
       <video id="Video2" muted autoplay controls >
           <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9AllAroundFast/video.mp4" type="video/mp4" />
           HTML5 Video not supported
       </video>             
    
    

z-index 属性用于更改显示的顺序。通常情况下，网页上的元素按照创建的顺序进行显示。如果一个元素与另一个元素叠加，则最后呈现的元素将完全看不见。第二个视频帧的 z-index 设置为 100 以确保它是最上面的元素（假定在视频前创建了不到 100 个元素）。根据正在播放的视频的大小以及页面上元素的数量来定位第二个视频帧。

也可以使用其他 CSS 属性，如 transform 可旋转图像、borderRadius 可在视频元素上创建圆角，如以下示例所示。有关详细信息，请参阅层叠样式表参考页面。

    
    HTML
   
   

    
    <html>
  <head>
    <title>Rotating a video</title>
    <style type="text/css">
   /* Set basic style for video */     
    #theVideo  
   {
        display:block;
        position:absolute;
        left:200px;
        top:200px;
        border: 2px solid red;
        border-radius: 20px;  
    }   
    /* Light up the image as a button, change cursor */
    #rotateVideo:hover
    {
        border:2px solid green;
        cursor: hand;                
     }
        
    </style>
    <script type="text/javascript">
        //  When the HTML elements load, call init()
        document.addEventListener("DOMContentLoaded", init, false);

        //  Rotate the video by 30degrees when image is clicked
        function init() {
            var rotateVal = 0;       //  Global variable to hold current rotation value
            document.getElementById("rotateVideo").addEventListener("click", function () {
                rotateVal = (rotateVal += 30) % 360;  // Calculate the next value, but keep between 0 and 360
                var temp = "rotate(" + rotateVal + "deg)"; // Create a style string
                document.getElementById("theVideo").style.msTransform = temp;  // Set the style
            }, false);                    
        }
    </script>
   
  </head>
  <body>
    <img src="rotate.png" id="rotateVideo" alt="Rotate button" title="Click to rotate 30 degrees" role="button"/>
    <video src="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" id="theVideo" controls >
      This example requires Internet Explorer 9 or later
    </video>
  </body>
</html>

   
   