项目地址
GitHub 预览地址: https://lightbc.github.io/videojs/
GitHub 下载地址: https://github.com/lightbc/videojs.git
index.html
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- index
- </title>
- <link rel="stylesheet" type="text/CSS" href="layui/css/layui.css" />
- <style type="text/css">
- * { margin: 0; padding: 0; } #url { width: 500px; height: 38px; display:
- inline-block; } button { margin-left: -4px; width: 100px; }
- </style>
- </head>
- <body>
- <input type="text" name="url" id="url" class="layui-input" value="http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4"
- />
- <button type="button" class="layui-btn" onclick="play()">
- Play
- </button>
- </body>
- </HTML>
- <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
- <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript">
- var width = document.body.clientWidth;
- var height = document.body.clientHeight;
- $("body").CSS({
- "width": width,
- "height": height,
- "text-align": "center",
- "line-height": height
- })
- var num = 0;
- function play() {
- var input = $("#url").val();
- var regex = /^(http|https).*\.mp4$/
- if (regex.test(input)) {
- location.href = "play.html?input=" + input
- } else {
- if (num <2) {
- alert("请检查网址是否正确!");
- } else {
- alert("输入格式:(http|https)://xxxxxxxx.mp4");
- }
- }
- num++;
- }
- </script>
play.HTML
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- play
- </title>
- <link rel="stylesheet" type="text/css" href="css/video-js.min.css">
- <script src="js/video.min.js">
- </script>
- <script src="js/jquery-3.4.1.js">
- </script>
- <style>
- *{ margin: 0; padding: 0; } #example-video{ position: absolute; top: 50%;
- left: 50%; margin:-300px 0 0 -500px; width: 1000px; height: 600px; } button{
- outline: none; }
- </style>
- <script type="text/javascript">
- $(function() {
- var url = location.href;
- var subURL = url.substr(url.indexOf("=") + 1, url.length) $("#example-video source").attr("src", subURL);
- var player = videojs('example-video', {
- "poster": "",
- "controls": "true"
- },
- function() {
- // 播放
- this.on('play',
- function() {});
- // 暂停
- this.on('pause',
- function() {});
- // 结束
- this.on('ended',
- function() {})
- });
- });
- </script>
- </head>
- <body>
- <section id="videoPlayer">
- <video id="example-video" class="video-js vjs-default-skin vjs-big-play-centered"
- autoplay preload="metadata">
- <source src="" type="video/mp4">
- </video>
- </section>
- </body>
- </HTML>
效果如下:
来源: http://www.bubuko.com/infodetail-3338302.html