c# 浏览器demo html5_代码实践|H5 播放器demo

最新推荐文章于 2023-01-13 16:03:24 发布

weixin_39611049

最新推荐文章于 2023-01-13 16:03:24 发布

阅读量273

点赞数

文章标签： c# 浏览器demo html5 html好玩的代码 js 手机端网站底部悬浮html广告代码

最近，要给“给我一只喵喵”做一个小视频的项目，需要视频播放功能。现在已经主流的方式都是优先先考虑使用h5播放器video,其他的方式都是GG,在这里我介绍用video实现视频播放方法。

jQuery是继prototype之後又一个优秀的Javascrīpt框架，写更少的代码，做更多的事情，所以我们也可以考虑使用小小的插件来实现我们的功能。在这里给大家推荐一个jQuery插件库-收集最全最新最好的jQuery插件，里面很多好玩的插件，可以用的时候搜一下。

爱奇艺／优酷

一般来说，最简单的可以借助于第三方服务，优势是使用视频网站的服务器，可以轻松解决兼容问题，而且断点续传，高清播放都轻松实现，能在任何平台上使用。缺点是带有广告，不过可以购买服务来避免广告，除掉爱奇艺／优酷的logo。整体性能无可挑剔。

H5 原生的界面 video

因为video样式是原生的界面看起来比较普通，但使用起来也很方便，手机端兼容情况很不错。网上的教程也比较多，我们下面的例子可以实现全屏的操作。

<!DOCTYPE html>

Video.js

video.js是一款开源免费的视频播放器，兼容性特好，兼容web和wap端大多数浏览器，兼容ie6以上。Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。

demo：http://www.jq22.com/yanshi404
官网：http://www.videojs.com
github：https://github.com/videojs/video.js

Flowplayer.js

FlowPlayer 是一个Web上的视频播放器，可以很容易将它集成在任何的网页上。支持HTTP以及流媒体传输。flowplayer分html5版和flash版本，大家可根据需求选择版本。Flowplayer支持播放flv、swf等流媒体以及图片文件，能够非常流畅的播放视频文件，支持自定义配置和扩展。

demo：http://www.jq22.com/yanshi6854
官网：https://flowplayer.org/latest
github：https://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>

当然你也可以将这段代码整合到自己的代码当中，记住核心是：

  <script src="jquery-1.10.2.js"></script>
  <script src="flowplayer.min.js"></script>

更多干货分享，请点关注公众号：大牛带我飞吧和本专栏：代码日爆，您的支持是我最大的动力！

weixin_39611049

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
c# 浏览器demo html5_代码实践|H5 播放器demo

最近，要给“给我一只喵喵”做一个小视频的项目，需要视频播放功能。现在已经主流的方式都是优先先考虑使用h5播放器video,其他的方式都是GG,在这里我介绍用video实现视频播放方法。jQuery是继prototype之後又一个优秀的Javascrīpt框架，写更少的代码，做更多的事情，所以我们也可以考虑使用小小的插件来实现我们的功能。在这里给大家推荐一个jQuery插件库-收集最全最新最好的jQ...
复制链接

扫一扫