代码实践| H5播放器演示

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

jQuery是继原型之后的另一个出色的JavaScript框架，编写更少的代码并做更多的事情h5 mp4 播放器代码，因此我们也可以考虑使用小型插件来实现我们的功能. 在这里，我为所有人推荐了一个jQuery插件库-收集最完整和最新的jQuery插件，其中有许多有趣的插件，可以在使用时进行搜索.

通常来说，最简单的方法是使用第三方服务. 优点是视频网站的服务器可以轻松解决兼容性问题，可以在任何平台上轻松实现断点续传和高清播放. 缺点是有广告，但是您可以购买服务以避免广告并删除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是一个开放源代码和免费的视频播放器，具有出色的兼容性，与Web和wap上的大多数浏览器兼容，并且与ie6及更高版本兼容. Video.js自动检测浏览器对HTML5的支持，如果不支持HTML5，它将自动使用Flash Player.

演示: jq22.com/yanshi404

官方网站:

github: github.com/videojs/video.js

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

演示: jq22.com/yanshi6854

官方网站: flowplayer.org/latest

github: github.com/flowplayer/flowplayer

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

将需要打开的视频放在此目录结构下后，修改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>

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

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