H5视频播放器演示代码

最近，要制作“给我喵喵”的小型视频项目，需要视频播放功能. 现在主流的方法是首先考虑使用h5播放器视频的方法，其他方法是GG，这里我介绍使用视频的视频播放方法.

jQuery是继原型之后的另一个出色的Javascrīpt框架. 它编写的代码更少，功能更多，因此我们也可以考虑使用小型插件来实现我们的功能. 在这里，我推荐一个jQuery插件库-最完整，最新和最好的jQuery插件的集合h5 mp4 播放器代码，其中有很多有趣的插件，请在使用时进行搜索.

爱奇艺/优酷

通常来说，最简单的方法是使用第三方服务. 优点是视频网站的服务器可以轻松解决兼容性问题，可以轻松实现可恢复的传输和高清播放，并且可以在任何平台上使用. 缺点是有广告，但是您可以购买服务以避免广告并摆脱iQiyi / Youku徽标. 整体表现无可挑剔.

由于视频风格是本机的，界面看起来很普通，但是使用起来也非常方便，并且手机的兼容性非常好. 教程也很多，我们下面的示例可以实现全屏操作.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <video id="video" src="http://vjs.zencdn.net/v/oceans.mp4" controls="controls" autoplay height="100%" width="100%">您的浏览器不支持。</video>
        <button type="button" style="text-align: center;" onclick="launchFullScreen(document.getElementById('video'))">全屏</button>
    </body>
    <script type="text/javascript">
    //全屏幕播放
    function launchFullScreen(element) {
      if(element.requestFullScreen) {
        element.requestFullScreen();
      } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if(element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      }
    }
    </script>
</html>

video.js是一个开源和免费的视频播放器h5 mp4 播放器代码，具有出色的兼容性，与大多数Web和wap浏览器兼容，并且与ie6及更高版本兼容. Video.js自动检测浏览器对HTML5的支持，如果不支持HTML5，它将自动使用Flash播放器.

演示:

官方网站:

github:

FlowPlayer是网络上的视频播放器，可以轻松集成到任何网页上. 支持HTTP和流媒体传输. Flowplayer分为html5版本和Flash版本，您可以根据需要选择版本. Flowplayer支持播放flv，swf和其他流媒体和图片文件，可以非常流畅地播放视频文件，并支持自定义配置和扩展.

演示:

官方网站:

github:

也许您对如何使用它感到好奇，所以我将对其进行演示.

首先从官方网站下载目录结构:

将需要打开的视频放入此目录结构后，修改index.html中的代码:

<!doctype html>
<head>
   <!-- player skin 播放器的皮肤 -->
   <link rel="stylesheet" href="skin/functional.css">
   <!-- site specific styling 播放器的 样式-->
   <style>
   body { font: 12px "Myriad Pro", "Lucida Grande", sans-serif; text-align: center; padding-top: 5%; }
   .flowplayer { width: 80%; }
   </style>
   <!-- for video tag based installs flowplayer depends on jQuery 1.7.2+ 这里是说需要jquery1.7以上的版本-->
   <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
   <!-- include flowplayer 播放器的jS核心代码-->
   <script src="flowplayer.min.js"></script>
</head>
<body>
   <!-- the player -->
   <div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.4167">
      <video>
         <!-- 讲我们要播放的视频路径-->
         <source type="video/mp4" src="123.mp4">
      </video>
   </div>
</body>

当然，您也可以将此代码集成到自己的代码中，请记住核心是:

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-286150-1.html