Jquery视频播放插件video.js & Vue中使用Videojs播放插件
Vue中使用Videojs播放插件 https://www.cnblogs.com/i-am-luckyGuy/p/11626707.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="author" content="adeng.y"> <link rel="dns-prefetch" href="//www.adeng.vip" /> <meta name="keywords" content="video.5.13.0.js,视频播放,播放插件,Video.js,jquery视频播放插件,flashs视频播放,播放器,jquery视频,VideoJS,VideoJS是什么,VideoJS下载,VideoJS使用教程,前端蜗牛"> <meta name="description" content="Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。(要支持ie低版本请下载5.4.3版 )" /> <title>视频播放插件video.5.13.0.js——adeng.y 前端蜗牛</title> <link href="img/video-js.min.css" rel="stylesheet"> <script src="img/videojs-ie8.min.js"></script> <style> *{padding:0;margin:0} body{width:100%;background:#337ab7; color: #fff; } a{ color: #fff; } .none{display:none} .video,.docs{ width: 800px; margin: 30px auto; } .video-js .vjs-big-play-button{ top: 50%; left: 50%; margin-top: -0.8em; margin-left: -0.8em; width: 1.6em; height: 1.6em; border-radius: 50%; } </style> </head> <body> <div class="page"> <div class="docs">Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。(要支持ie低版本请下载5.4.3版 )</div> <div class="video"> <video id="claphands" class="video-js vjs-default-skin vjs-big-play-centered"> <source src="img/shjwj.mp4"> </video> </div> <p style="padding-top: 20px; text-align: center;"> 官网:http://www.videojs.com/ </p> <script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script> <script src="img/video.min.js"></script> <script> videojs(document.getElementById('claphands'), { controls: true, preload: 'auto', width: 800, height: 400, flash: { swf: 'img/video-js.swf' } }, function() {}); </script> </body> </html>
官网:http://www.videojs.com/
视频播放video.js参数:
videojs(document.getElementById('claphands'), { controls: true, preload: 'auto', // 预先加载视频 width: 462, // 视频宽度 height: 207, // 视频高度 autoplay : false, // 是否自动播放 flash: { swf: 'img/video.js_5.13.0_video-js.swf' //ie加载swf } }, function() {});
效果:
下载: