使用html5 video实现视频播放-守望者-AIR技术交流

破晓发表于 2016-7-22 18:23:34

使用html5 video实现视频播放

<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">本文来自：http://www.365mini.com/page/html5-video.htm<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;"> <p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">在前面的《<a href="http://www.365mini.com/page/html5-canvas.htm" title="html5 Canvas绘制图形入门详解" style="color: rgb(102, 0, 153); text-decoration: none;">html5 Canvas绘制图形入门详解</a>》系列文章中，我们学习了如何使用html5 canvas进行绘图。在html5中，我们不仅可以按照自己的意愿绘制图形，还可以使用html5提供的<video>标签实现视频播放、使用html5提供的<audio>标签实现音频播放。<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">今天，我们就来初步学习如何使用html5的<video>标签实现视频播放功能。<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">在html5出现之前，想要在浏览器中实现视频播放功能，就必须使用额外的插件或控件来实现。不过，自从html5问世以后，这样的局面有所改变。现在，我们使用html5的<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">video</code>标签，可以不依赖于任何第三方的插件或控件，直接在浏览器中实现视频播放功能，<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">俗话说「知己知彼，百战百胜」。对于<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">video</code>标签而言，同样也是如此，只有先了解了<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">video</code>标签，使用起来才能得心应手。现在，我们就来看看<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">video</code>标签具备哪些标签属性(如果<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">video</code>标签具有以下属性就表示启用该属性所表示的功能，不添加对应的属性就表示禁用对应的功能)：<table border="1" cellspacing="0" cellpadding="0" style="margin-top: 1.5em; margin-bottom: 1.5em; border: 1px solid rgb(128, 128, 128); outline: 0px; font-size: 13px; vertical-align: baseline; border-spacing: 0px; overflow-x: auto; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;"><tbody style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><tr class="firstRow" style="border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><th width="165px" style="padding: 5px; border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128) rgb(128, 128, 128) rgb(132, 132, 132); outline: 0px; vertical-align: top; white-space: nowrap; background: transparent;">video标签属性</th><th style="padding: 5px; border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128) rgb(128, 128, 128) rgb(132, 132, 132); outline: 0px; vertical-align: top; white-space: nowrap; background: transparent;">基本描述</th></tr><tr style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">width</td><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">设置视频播放器的宽度</td></tr><tr style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">height</td><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">设置视频播放器的高度</td></tr><tr style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">src</td><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">设置用于播放的视频的URL</td></tr><tr style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">autoplay</td><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">设置视频在加载完毕后自动开始播放。属性值为"autoplay"</td></tr><tr style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">controls</td><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">显示具备播放、暂停等功能的控件。属性值为"controls"</td></tr><tr style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">loop</td><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">视频在播放完毕后重新循环播放。属性值为"loop"</td></tr><tr style="border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">preload</td><td style="padding: 5px; border-color: rgb(128, 128, 128); outline: 0px; vertical-align: top; background: transparent;">指定视频在页面加载时进行加载，并预备播放。属性值为"preload"，如果使用 "autoplay"，则忽略该属性。</td></tr></tbody></table><p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">在了解了video标签之后，下面我们就使用html5的<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">video</code>标签来实现视频播放。<pre class="prettyprint linenums" style="margin-bottom: 20px; padding: 10px; border: 1px solid rgb(153, 153, 153); outline: 0px; font-size: 12px; vertical-align: baseline; word-break: break-all; overflow: auto; position: relative; color: rgb(51, 51, 51); font-stretch: normal; line-height: 1.5; font-family: "Courier New", Consola, SimSun; border-radius: 8px; box-shadow: rgb(153, 153, 153) 0px 2px 4px; background: rgb(247, 247, 247);"><ol class="linenums" style="margin-right: 2.2em; margin-left: 2.2em; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><!DOCTYPE html> </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><html> </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><head> </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><meta charset="UTF-8"> </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><title>HTML5 video视频播放入门示例</title> </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"></head> </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><body> </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"> </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"> </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><video id="myVideo" src="Enola - I Can Make A Mess.mp4" autoplay="autoplay" controls="controls" loop="loop"> </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">您的浏览器不支持video标签。 </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"></video> </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"></body> </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"></html></li></ol></pre><p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">现在，我们打开浏览器，看一看具体的效果：<p class="img-box" style="margin-top: 1.2em; margin-bottom: 1.3em; padding-top: 5px; border: 1px solid rgb(204, 204, 204); outline: 0px; font-size: 13px; vertical-align: baseline; text-align: center; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; width: 570px; background: transparent;"><a class="fancybox" rel="gallery" href="http://codeplayer.qiniudn.com/video.png" title="使用video标签添加的视频播放器" style="color: rgb(102, 0, 153); text-decoration: none; background: none !important;"><img src="http://codeplayer.qiniudn.com/video.png" data-original="http://codeplayer.qiniudn.com/video.png" class="lazy" width="707" height="271" alt="使用video标签添加的视频播放器" title="使用video标签添加的视频播放器" _show_text="true" style="border-width: 0px; border-style: initial; outline: 0px; vertical-align: baseline; max-width: 100%; height: auto; overflow: hidden; display: inline; background: transparent;"></a>使用video标签添加的视频播放器<p class="note" style="margin-top: 1.2em; margin-bottom: 5px; padding: 10px; border: 1px solid rgb(230, 219, 85); outline: 0px; font-size: 13px; vertical-align: baseline; border-radius: 3px; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: none 0px 0px repeat scroll rgb(255, 255, 224);">值得注意的是：html5的<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">video</code>标签目前只支持播放<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">.mp4</code>、<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">.ogg</code>、<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">.webm</code>等几种格式的视频文件，暂不支持其他格式的视频文件。此外，不同的html5浏览器支持的视频文件格式也略有不同，这种状况可能会在未来的html5中得以改善。<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">为了更好地兼容各种浏览器，你可以为一个<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">video</code>标签添加多个<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">source</code>子标签，每个<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">source</code>标签引用一个不同格式的视频文件。这样，html5浏览器会自动在这些<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">source</code>标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放，从而实现兼容多个浏览器的视频播放功能。<pre class="prettyprint linenums" style="margin-bottom: 20px; padding: 10px; border: 1px solid rgb(153, 153, 153); outline: 0px; font-size: 12px; vertical-align: baseline; word-break: break-all; overflow: auto; position: relative; color: rgb(51, 51, 51); font-stretch: normal; line-height: 1.5; font-family: "Courier New", Consola, SimSun; border-radius: 8px; box-shadow: rgb(153, 153, 153) 0px 2px 4px; background: rgb(247, 247, 247);"><ol class="linenums" style="margin-right: 2.2em; margin-left: 2.2em; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><!DOCTYPE html> </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><html> </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><head> </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><meta charset="UTF-8"> </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><title>HTML5 video视频播放入门示例</title> </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"></head> </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><body> </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"> </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"> </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><video id="myVideo" autoplay="autoplay" controls="controls" loop="loop"> </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">     </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    <source src="北京欢迎你.mp4" ></source> </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    <source src="北京欢迎你.ogg" ></source> </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    <source src="北京欢迎你.webm" ></source> </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">您的浏览器不支持video标签。 </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"></video> </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"></body> </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"></html></li></ol></pre>

页: [1]

守望者--AIR技术交流's Archiver

使用html5 video实现视频播放