H5视频播放demo

现在已经主流的方式都是优先先考虑使用h5播放器;
因为video样式是原生的界面看起来比较普通，但使用起来也很方便，手机端兼容情况很不错。网上的教程也比较多，我们下面的例子可以实现全屏的操作。

<!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>

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>

H5视频播放demo相关推荐

制作统一样式的H5视频播放器
前言之前,忙于考试未来及更新文章.本文适用于掌握JavaScript html css jQuery的基本内容的读者.不知大家有没注意原生的H5视频播放器用不同的浏览器打开所呈现的效果并不一样.而如 ...
使用vue二次开发海康监控H5视频播放
使用vue二次开发海康监控H5视频播放西瓜播放器示例demo 阿里云的示例demo 使用海康的H5视频开发包, 海康的api 页面中的使用第一步第二步第三步第四步切记 bug 由于公司项目 ...
让我为你介绍一个神器：Chimee，一套可扩展的 H5 视频播放器解决方案
Chimee(读"奇米", [tʃɪ'mɪ:])是由奇舞团开源的一套 H5 视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造. Chimee ...
php微信h5支付demo,微信h5支付 demo-HTML5微信支付DEMO下载最新版--pc6下载站
在微信支付已经霸占了大部分人生活习惯的年代,一个不支持微信支付的商家都不好意思开店了,程序猿们可以下载查看HTML5微信支付DEMO来帮助您熟悉微信支付的代码,马上下载查看微信h5支付demo的内容吧 ...
Chimee - 简单易用的H5视频播放器解决方案
Chimee - 简单易用的H5视频播放器解决方案参考文章: (1)Chimee - 简单易用的H5视频播放器解决方案 (2)https://www.cnblogs.com/lhb25/p/chim ...
SuperVideo - H5视频播放插件
今天给大家分享一个视频播放插件,支持发送弹幕的. <!DOCTYPE html> <html lang="cn"><head><link ...
微博APP中H5 视频播放完毕退出
微博APP中H5 视频播放全屏退出微博视频播放完毕后 video.style.display = 'none'; 不能有效的隐藏视频窗口所有使用document.body.removeChild ...
让我为你介绍一个神器：Chimee，一套可扩展的 H5 视频播放器解决方案 1
Chimee(读"奇米", [tʃɪ'mɪ:])是由奇舞团开源的一套 H5 视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造. Chimee ...
一款炫酷的H5视频播放插件
最近H5开发者常用的几款插件flv.js video.js等,这些都是功能非常强大的视频播放插件,但是笔者作为一个"有想法和敢于挑战"的年轻程序员,决定自己手撸一个H5视频播放插件 ...
springboot + vue3实现视频播放Demo（video.js Vue3-video-play视频播放器）
文章目录学习链接前言 ffmpeg 安装ffmpeg 配置环境变量分割视频文件后台配置 WebConfig 前端代码 video.js示例安装依赖视频播放组件效果 Vue3-video- ...

H5视频播放demo

H5视频播放demo相关推荐

最新文章

热门文章