. Web-. . . .
| , | |
| 30.11.2016 | |
| 1,3 M |
. ,
, , , , .
web-. localhost:3000, (. 16).
. 16.
, , - (. 17).
. 17. /
, , . ۻ (. 18).
. 18.
, .
FAQ, , Web-. . (. 19). , , .
. 19.
. , \\, (. 20).
. .
. 20.
:
;
;
;
;
;
.
4.10
web-. :
? ;
? :
_ ;
_ ;
? ( \\);
? .
. .
4.11
, . web-.
: , , , Web - (. 1).
. , , .. . , :
? (/, / );
? ;
? , .
. WeVideo , . , . , . 4- flex (10 ./), personal (39 ./), unlimited (69 ./), business. , , .
.
, .
, :
? 595 . ( RU) [12];
? - 413 ./.
? - 1300 ./. (15600 ./) [13].
: 16195 ./ - (16013 ./ ).
, 2 : .
, - . , 30 5 . . .
, 300 ./. , , , 10%.
3 , 21 .
3.
|
, ./ |
, . |
, ./ |
, . |
||
|
1 |
1350 |
1350 |
300 |
300 |
|
|
2 |
1350 |
2699 |
330 |
630 |
|
|
3 |
1350 |
4049 |
363 |
993 |
|
|
4 |
1350 |
5398 |
399 |
1392 |
|
|
5 |
1350 |
6748 |
439 |
1832 |
|
|
6 |
1350 |
8098 |
483 |
2315 |
|
|
7 |
1350 |
9447 |
531 |
2846 |
|
|
8 |
1350 |
10797 |
585 |
3431 |
|
|
9 |
1350 |
12146 |
643 |
4074 |
|
|
10 |
1350 |
13496 |
707 |
4781 |
|
|
11 |
1350 |
14845 |
778 |
5559 |
|
|
12 |
1350 |
16195 |
856 |
6415 |
|
|
13 |
1334 |
17529 |
942 |
7357 |
|
|
14 |
1334 |
18864 |
1036 |
8392 |
|
|
15 |
1334 |
20198 |
1139 |
9532 |
|
|
16 |
1334 |
21533 |
1253 |
10785 |
|
|
17 |
1334 |
22867 |
1378 |
12163 |
|
|
18 |
1334 |
24202 |
1516 |
13680 |
|
|
19 |
1334 |
25536 |
1668 |
15348 |
|
|
20 |
1334 |
26870 |
1835 |
17182 |
|
|
21 |
1334 |
28205 |
2018 |
19201 |
|
|
22 |
1334 |
29539 |
2220 |
21421 |
|
|
23 |
1334 |
30874 |
2442 |
23863 |
|
|
24 |
1334 |
32208 |
2686 |
26549 |
|
|
25 |
1334 |
33542 |
2955 |
29504 |
|
|
26 |
1334 |
34877 |
3250 |
32755 |
|
|
27 |
1334 |
36211 |
3575 |
36330 |
. 21.
, , , 27 , .. 2 .
4.12
Web-, , . Post Get , NoSQL - MongoDB. Photoshop . JavaScript, JQuery, Ajax, Iutil, Socket.io.
, .
, .
. Web- . , Web- .
: Web-, . :
? , ;
? Web-, : , , ;
? , Web-;
? Web- . .
Web- .
.
, , ( ). , Web- .
1. , . JavaScript Web-/. . - .: -, 2005.
2. , . HTML: Web-.: . .: . ./. . - .: .
3. Photoshop. URL:http://www.adobe.com/ru/products/premiere.html
4. Corel Corporation
URL:http://corel.ru/product/ps19/
5. Sony URL:http://www.sony.ru/pro/product/broadcast-products-creative-software/vegas-pro-12/overview/#overview
6. Corel. videostudio URL:http://www.videostudiopro.com/ru/products/videostudio/
7. Wevideo URL:https://www.wevideo.com/
8. expres URL:http://expressjs.com/ru/
9. Material Design. URL:https://habrahabr.ru/post/248653/
10. Node. URL:https://nodejs.org/en/;
11. bootstrap. URL:http://bootstrap-3.ru/components.php;
12. masterhost. . URL:https://masterhost.ru/service/domain/price/
13. https://www.digitalocean.com/pricing/
14. trafcom. URL:http://www.trafcom.ru/ru/internet-reklama/internet-reklama-cena.html
1. app.js
1. var bodyParser= require('body-parser');
2. var express = require('express');
3. var app=express();
4. app.use(bodyParser.urlencoded({extended:true}));
5. app.use(express.static(__dirname + '/public'));
6. app.use(express.static(__dirname + '/uploads'));
7. var server = app.listen(3000,function(){
8. console.log("listen 3000");
9. });
require('./routes.js')(app, server);
2. routes.js
1. module.exports = function(app, server){
2. var multer = require('multer');
3. var upload = multer({ dest: './uploads/'});
4. var mongodb = require('mongodb');
5. var mongoose = require('mongoose');
6. var io = require('socket.io');
7. var ejs = require('ejs');
8. var MongoClient = mongodb.MongoClient;
9. var url ='mongodb://localhost:27017/users';
10. var io = io.listen(server);
11. var dbprojects;
12. var username="'ОЙТИ";
13. var LocalStorage = require('node-localstorage').LocalStorage;
14. localStorage = new LocalStorage('./scratch');
15. app.post('/login', function(req, res, next) {
16. var user = req.body.login;
17. var password = req.body.pass;
18. MongoClient.connect(url, function(err, db) {
19. var collection = db.collection('users');
20. collection.find({"name" : user}).toArray(function(err, docs) {
21. if(docs!=""){
22. collection.find({"name" : user, "password" : password}).toArray(function(err, docs) {
23. if(docs!=""){
24. dbprojects= collection.find({"name" : user, "password" : password}).toArray(function(err, docs) {});
25. res.render('home', {data: username});
26. }else{
27. io.emit('loginerr', " ");
28. }
29. });
30. }
31. else{
32. io.emit('loginerr', " ");
33. }
34. });
35. });
36. });
37. app.post('/registr', function(req, res, next) {
38. var user = req.body.login;
39. var password = req.body.pass;
40. var mail = req.body.mail;
41. MongoClient.connect(url, function(err, db) {
42. var collection = db.collection('users');
43. collection.find({"name" : user}).toArray(function(err, docs) {
44. if(docs!=""){
45. io.emit('regerr', " ");
46. }
47. else{
48. collection.insert({'name': user, "password": password, "mail": mail, "accept": 0, "projects" : []});
49. res.redirect('/');
50. }
51. });
52. });
53. });
54. app.post('/newprojcreate', function(req, res, next) {
55. var user1=localStorage.getItem("curuser");
56. var projname = req.body.projname;
57. MongoClient.connect(url, function(err, db) {
58. var collection = db.collection('users');
59. collection.find({"name" : user1}).toArray(function(err, docs) {
60. collection.update( { name: user1 } , { $push: { projects: { name: projname, content: "" } } } );
61. });
62. });
63. res.redirect('/videdit');
64. });
65. app.get('/', function(req, res){
66. res.render('home');
67. });
68. app.get('/videdit', function(req, res){
69. res.render('videdit');
70. });
71. app.get('/info', function(req, res){
72. res.render('info');
73. });
74. app.post('/projwin', function(req, res){
75. var user1=localStorage.getItem("curuser");
76. MongoClient.connect(url, function(err, db) {
77. var collection = db.collection('users');
78. var usr = collection.find({"name" : user1}, function(err, cursor) {
79. var ac=cursor.toArray(function(err, items) {
80. dbprojects=items;
81. });
82. });
83. });
84. res.render('projwin', {projects: dbprojects} );
85. });
86. app.use(multer({ dest: './public/',
87. rename: function (fieldname, filename) {
88. return filename;
89. },
90. onFileUploadStart: function (file) {
91. console.log(file.originalname + ' is starting ...');
92. },
93. onFileUploadComplete: function (file) {
94. console.log(file.fieldname + ' uploaded to ' + file.path)
95. }
96. }));
97. app.post('/upload',function(req,res){
98. upload(req,res,function(err) {
99. if(err) {
100. return res.end("Error uploading file.");
101. }
102. res.redirect('/videdit');
103. });
104. });
105. io.on('editdata', function (data) {
106. require('./edit.js')(data);
107. });
108. io.on('connection', function (socket) {
109. socket.emit('news', "how a u");
110. socket.on('editdata', function (data) {});
111. });
112. io.on('connection', function (socket) {
113. socket.emit('savereq', "savereq");
114. socket.on('saveproj', function (data) {
115. MongoClient.connect(url, function(err, db) {
116. var user1=localStorage.getItem("curuser");
117. var collection = db.collection('users');
118. collection.update( { "projects.name": "qwe" } , { $set: { "qwe.$.content": data } } );
119. });
120. });
121. });
122. }
3. home.ejs
1. <!DOCTYPE html>
2. <html lang="ru">
3. <head>
4. <meta charset="utf-8" />
5. <title>VideoCooker</title>
6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
7. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
8. <link rel="stylesheet" href="css/main.css" />
9. <link rel="stylesheet" href="css/home.css" />
10. <link rel="stylesheet" href="css/owl.carousel.css" />
11. <link rel="stylesheet" href="css/owl.theme.css" />
12. </head>
13. <body id="homebody">
14. <div id="authwind">
15. <button id="authclouse" type="button" value="закрыть" onClick="authclouse();"></button>
16. <p id="test1"> </p>
17. <p style="color: #e67835;"><input type="checkbox" id="authcheck" value="a2"> </p>
18. <form id="formreg" action="/registr" method="POST">
19. <br><p id="regerrtext"></p><br>
20. <div class="input-group">
21. <span class="input-group-addon"><i class="fa fa-user fa-fw" aria-hidden="true"></i></span>
22. <input name="login" class="form-control" type="text" id="reglogin" placeholder="Username" aria-describedby="basic-addon1"/><br>
23. </div><br>
24. <div class="input-group">
25. <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
26. <input name="pass" class="form-control" type="password" id="regpass" placeholder="Password" aria-describedby="basic-addon1"/><br>
27. </div><br>
28. <div class="input-group">
29. <span class="input-group-addon"><i class="fa fa-at fa-fw" aria-hidden="true"></i></span>
30. <input name="mail" class="form-control" type="text" id="mail" placeholder="mail@example.com" aria-describedby="basic-addon1" /><br>
31. </div><br>
32. <input value="Создать акаунт" name="submit" id="auth_submit_button" type="submit" />
33. </form>
34. <form id="formauth" action="/login" method="POST">
35. <br><p id="errtext"></p><br>
36. <div class="input-group">
37. <span class="input-group-addon"><i class="fa fa-user fa-fw" aria-hidden="true"></i></span>
38. <input name="login" class="form-control" type="text" id="login" placeholder="Username" aria-describedby="basic-addon1"/><br>
39. </div><br><br>
40. <div class="input-group">
41. <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
42. <input name="pass" class="form-control" type="password" id="pass" placeholder="Password" aria-describedby="basic-addon1"/><br>
43. </div>
44. <input value="'ойти" name="submit" id="auth_submit_button" type="submit" />
45. </form>
46. </div>
47. <div id="header">
48. <div id="logo"></div>
49. <div>
50. <div id="title">
51. VIDEO - COOKER
52. </div>
53. <div id="slogan">
54. MAKE UP, CREATE, ENJOY
55. </div>
56. </div>
57. </div>
58. <form action="/projwin" id="form1" method="post" style="display:none"><input name="susername" type="text" id="susername"/></form>
59. <div id="menubar">
60. <ul id="menubut">
61. <li id="menubutsel"><a href="#"></a></li>
62. <li id="menubutsel"><a href="/videdit"> </a></li>
63. <li id="menubutsel"><a id="proja" style="display: none;" href="#" onClick="gotopro();"></a></li>
64. <li id="menubutsel"><a href="/info">FAQ</a></li>
65. <li id="menubutsel">
66. <a href="#" onClick="gotoedit();" id="loginfild" name="loginfild">
67. <i class="fa fa-user fa-fw" style="display: inline;" aria-hidden="true" id="nofus"></i>
68. </a>
69. </li>
70. </ul>
71. </div>
72. <div id="stataria">
73. <ul id="statfor">
74. <li><img src="img/circl.png"></li>
75. <li><img src="img/circl.png"></li>
76. <li><img src="img/circl.png"></li>
77. </ul>
78. <ul id="statpos">
79. <li><img src="img/circl.png"></li>
80. <li><img src="img/circl.png"></li>
81. <li><img src="img/circl.png"></li>
82. </ul>
83. </div>
84. <div id="divline">
85. <div id="divtext">
86. OUR CAPACITY
87. </div>
88. </div>
89. <div id="carouselbox">
90. <div id="carousel" class="owl-carousel owl-theme">
91. <div><img src="img/slid1.png"></div>
92. <div><img src="img/slid2.png"></div>
93. <div><img src="img/slid3.png"></div>
94. <div><img src="img/slid4.png"></div>
95. <div><img src="img/slid5.png"></div>
96. <div><img src="img/slid6.png"></div>
97. </div>
98. </div>
99. <div id="footer">
100. . 122
101. </div>
102. <script src="js/jquery-1.11.1.min.js"></script>
103. <script src="js/owl.carousel.min.js"></script>
104. <script src="js/owl.carousel.js"></script>
105. <script src="js/socket.io.js"></script>
106. <script src="js/home.js"></script>
107. </body>
</html>
4. home.js
1. $(document).ready(function(){
2. if (localStorage.getItem("username")!="LOGIN") {
3. $('#proja').show();
4. }
5. $('#nofus').text(localStorage.getItem("username"));
6. var owl = $("#carousel");
7. $('.owl-carousel').owlCarousel({
8. nav: true,
9. navText: ["<img src='img/scrolleft.png'>","<img src= '../img/scrolrig.png'>"],
10. items:1,
11. loop:true,
12. autoPlay: 1000,
13. });
14. });
15. $('#login').on('input', function() {
16. localStorage.setItem('username',$('#login').val());
17. });
18. $('#reglogin').on('input', function() {
19. localStorage.setItem('username',$('#login').val());
20. });
21. $('#formauth').submit(function() {
22. var logind = $("#login").val();
23. var pass = $("#pass").val();
24. });
25. function gotoedit(){
26. document.getElementById('authwind').style.display='block';
27. $('#homebody *[id != "authwind"]').css("opacity", "0.4");
28. $('#authwind *').css("opacity", "1");
29. }
30. function authclouse(){
31. document.getElementById('authwind').style.display='none';
32. $('body *').css("opacity", "1");
33. localStorage.setItem('username',"LOGIN");
34. }
35. $('#authcheck').change(function () {
36. $('#formauth').toggle();
37. $('#formreg').toggle();
38. if ($("#authcheck").prop("checked")) {
39. $("#test1").text("'ход в акаунт");
40. }else{
41. $("#test1").text(" егистрация");
42. }
43. });
44. function gotopro(){
45. $("#form1").submit();
46. $("#susername").text($("#loginfild").text());
47. }
48. var socket = io.connect('http://localhost:3000');
49. $('#formauth').submit(function() {
50. socket.emit('my other event', localStorage.getItem("username"));
51. });
52. socket.on('loginerr', function (data) {
53. $('#errtext').text(data);
54. });
5. package.json
1. {
2. "name": "vkr",
3. "version": "2.0.0",
4. "description": "",
5. "main": "app.js",
6. "scripts": {
7. "test": "echo \"Error: no test specified\" && exit 1"
8. },
9. "author": "alex zavyalov",
10. "license": "ISC",
11. "dependencies": {
12. "assert": "^1.3.0",
13. "body-parser": "^1.15.0",
14. "egs": "^0.3.1",
15. "ejs": "^2.3.4",
16. "express": "^4.13.3",
17. "fluent-ffmpeg": "^2.0.1",
18. "mongodb": "^2.1.7",
19. "mongoose": "^4.4.4",
20. "multer": "~0.1.6",
21. "node-localstorage": "^1.1.2",
22. "socket.io": "^1.4.5",
23. "util": "^0.10.3"
24. },
25. "devDependencies": {
26. "should": "~7.1.0",
27. "mocha": "~2.3.3",
28. "supertest": "~1.1.0"
29. }
30. }
6. videdit.ejs
1. <!DOCTYPE html>
2. <html lang="ru" id="projectcontent">
3. <head>
4. <meta charset="utf-8" />
5. <title>VideoCooker</title>
6. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
9. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
10. <link rel="stylesheet" href="css/main.css" />
11. <link rel="stylesheet" href="css/videdit.css" />
12. <link rel="stylesheet" href="css/fonts.css" />
13. <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
14. </head>
15. <body id="editorbody">
16. <div id="smoleditwin">
17. <button id="authclouse" type="button" value="закрыть" onClick="closesmoleditwin();"></button>
18. <video id="videofocat" src="" controls="controls"></video><br>
19. <span class="glyphicon glyphicon-play"></span>
20. <p><input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"></p>
21. <div id="slider-range"></div>
22. <button id="butcat" class="btn btn-primary " type="button" onClick="cattreack();">
23. <span class="glyphicon glyphicon-scissors"></span>
24. </button>
25. </div>
26. <div id="smolhad">
27. <div class="dropdown">
28. <button id="butdropdown" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
29. <span class="glyphicon glyphicon-tasks"></span>
30. </button>
31. <ul class="dropdown-menu">
32. <li><a href="/"></a></li>
33. <li><a href="/info"></a></li>
34. <li><a href="#" onClick="gotopro();"></a></li>
35. <li onclick="saveproj()"><a href="#"> </a></li>
36. <li><a href="#"> </a></li>
37. </ul>
38. </div>
39. <div id="slogo"></div>
40. <div id="stitle">VideoCooker</div>
41. <div id="username"></div>
42. </div>
43. <div class="container">
44. <div class="column" id="videocolum" style="width: 50%;">
45. <video onended="chengevid(this);" style="width: 100%;" src="" id="videoPlayer" ontimeupdate="runnerupdate(this)"></video>
46. </div>
47. <div class="column" id="uploadcolum">
48. <div id='filecont'>
49. <div class="tabs">
50. <ul class="tabs__caption">
51. <li class="active"></li>
52. <li></li>
53. <li></li>
54. </ul>
55. <div class="tabs__content active" id="videocontaner">
56. <form class="upform" id="vuploadForm" enctype="multipart/form-data" action="/upload" method="post">
57. <div id="upload-file-container">
58. <input id="vfilefild" type="file" accept="video/*" name="userPhoto" onchange="FileSelct();" />
59. </div>
60. <div id="upload-file-button" style="display:none;">
61. <input type="submit" value="Upload" name="submit" id="vfilesubm">
62. </div>
63. </form>
64. </div>
65. <div class="tabs__content" id="audiocontaner">
66. <form id="auploadForm" enctype="multipart/form-data" action="/upload" method="post">
67. <div id="upload-file-container">
68. <input id="afilefild" type="file" accept="audio/*" name="userPhoto" onchange="FileSelct();" />
69. </div>
70. <div id="upload-file-button" style="display:none;">
71. <input type="submit" value="Upload" name="submit" id="afilesubm">
72. </div>
73. </form>
74. </div>
75. <div class="tabs__content" id="imgcontaner">
76. <form class="upform" id="iuploadForm" enctype="multipart/form-data" action="/upload" method="post">
77. <div id="upload-file-container">
78. <input id="ifilefild" type="file" accept="image/*" name="userPhoto" onchange="FileSelct();" />
79. </div>
80. <div id="upload-file-button" style="display:none;">
81. <input type="submit" value="Upload" name="submit" id="ifilesubm">
82. </div>
83. </form>
84. </div>
85. </div>
86. </div>
87. </div>
88. </div>
89. <div id="controlbar">
90. <div class="btn-group dropup" id="addtreacbutt">
91. <button type="button" class="btn btn-primary dropdown-toggle btn-default btn-lg" data-toggle="dropdown">
92. <span class="glyphicon glyphicon-plus-sign"></span>
93. </button>
94. <ul class="dropdown-menu" id="ddmenu">
95. <li id="addbutlist">
96. <button type="button" class="btn btn-default btn-lg" onclick="addvideotaimline()">
97. <span class="glyphicon glyphicon-facetime-video"></span>
98. </button>
99. <button type="button" class="btn btn-default btn-lg" onclick="addaudiotaimline()">
100. <span class="glyphicon glyphicon-music"></span>
101. </button>
102. <button type="button" class="btn btn-default btn-lg" onclick="addtexttaimline()">
103. <span class="glyphicon glyphicon-font"></span>
104. </button>
105. <button type="button" class="btn btn-default btn-lg" onclick="addimgtaimline()">
106. <span class="glyphicon glyphicon-picture"></span>
107. </button></li>
108. </ul>
109. </div>
110. <div id="playbutgrup">
111. <button type="button" class="btn btn-default btn-lg" id="playbut" onclick="playtreack()">
112. <span class="glyphicon glyphicon-play"></span>
113. </button>
114. <button type="button" class="btn btn-default btn-lg" id="pausebut" onclick="pausetreack()">
115. <span class="glyphicon glyphicon-pause"></span>
116. </button>
117. </div>
118. <button type="button" class="btn btn-default btn-lg" id="mashbut" >
119. <span class="glyphicon glyphicon-resize-horizontal"></span>
120. </button>
121. <button type="button" class="btn btn-default btn-lg" onclick="exporteditdata()">
122. <span class="glyphicon glyphicon-export"></span>
123. </button>
124. <button type="button" class="btn btn-default btn-lg" id="pausebut" onclick="saveproj()">
125. <span class="glyphicon glyphicon-floppy-saved"></span>
126. </button>
127. <a href="/reopen"></a>
128. </div>
129. <div class="timelines">
130. <div id="runner"></div>
131. <div id="line"></div>
132. <div class="timeline" id="tl1">
133. <div class="btn-group dropup">
134. <button type="button" class="btn btn-primary dropdown-toggle btn-default btn-lg" data-toggle="dropdown">
135. <span class="glyphicon glyphicon-facetime-video"></span>
136. </button>
137. </div>
138. <ul id="v1" class='div1' ondrop="drop(event,this)" ondragover="allowDrop(event)"></ul>
139. </div>
140. </div>
141. <script src="js/jquery-1.11.1.min.js" ></script>
142. <script src="js/iutil.js"></script>
143. <script src="js/jquery.form.min.js" ></script>
144. <script src="js/socket.io.js"></script>
145. <script type="text/javascript" src="js/jquery.json-2.3.js"></script>
146. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
147. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
148. <script src="js/upload.js" ></script>
149. <script src="js/editer.js" ></script>
150. </body>
151. </html>
7. editer.js
1. var arr = [];
2. var arrpostrec = [];
3. var sarrpostrec = [];
4. var count = [];
5. var ncurfile=1;
6. var curvidtrec=1;
7. var leftallprev=0;
8. var counttimelines=1;
9. var boolmastab=false;
10. var curentreac;
11. function FileSelct(){
12. $('#upload-file-container').hide();
13. $('#upload-file-button').show();
14. }
15. function allowDrop(ev) {
16. ev.preventDefault();
17. }
18. function drag(ev) {
19. ev.dataTransfer.setData("text", ev.target.id);
20. }
21. function setwidth(tlid,width){
22. if (boolmastab==true) {
23. $('#bolck'+count[tlid]+"tl"+tlid).css('width', width);
24. }else{
25. $('#bolck'+count[tlid]+"tl"+tlid).css('width', "80px");
26. }
27. $(".dragaox").draggable({
28. containment:'parent',
29. axis: "x"
30. });
31. }
32. function drop(ev,elem) {
33. var fulid=$(elem).attr('id');
34. var tatl=fulid.charAt(0);
35. var tlid=parseInt(fulid.charAt(1));
36. count[tlid]++;
37. ev.preventDefault();
38. var data = ev.dataTransfer.getData("text");
39.
40. if (tatl=="v") {
41. var nof=$("#"+data).text();
42. var newLi = document.createElement('li');
43. if (tlid==1) {
44. newLi.className = "ui-state-default";
45. }else{
46. newLi.className = "dragaox";
47. }
48. newLi.style="height: 45px; width:100px; margin-top: 1px; background-color: grey; border-radius: 10px; ";
49. newLi.id="bolck"+count[tlid]+"tl"+tlid;
50. ev.target.appendChild(newLi);
51. newLi.innerHTML = "<video class='tlvidprev' id='v"+count[tlid]+"tl"+tlid+"' preload='metadata' src='"+nof+"'></video>"+
52. "<button type='button' id='se"+tlid+count[tlid]+"' class='editbatton btn-primary' onclick='opensmoleditwin(this)' >"+
53. "<span class='glyphicon glyphicon-cog'></span></button>"+
54. "<button type='button' id='de"+tlid+count[tlid]+"' class='dellbatton btn-primary' onclick='delroll(this)'>"+
55. "<span class='glyphicon glyphicon-trash'></span></button>";
56. setTimeout(function () {
57. var vide= document.getElementById("v"+count[tlid]+"tl"+tlid);
58. var width = vide.duration;
59. setwidth(tlid,width);
60. }, 500);
61. }else if (tatl=="a") {
62. var nof=$("#"+data).text();
63. var audioElement = document.createElement('audio');
64. audioElement.setAttribute('src', nof);
65. var newLi = document.createElement('li');
66. newLi.className = "dragaox";
67. newLi.style="height: 45px; width:"+duration+"px; margin-top: 1px; background-color: grey; border-radius: 10px; ";
68. newLi.id="bolck"+count[tlid]+"tl"+tlid;
69. ev.target.appendChild(newLi);
70. newLi.innerHTML = "<video class='tlvidprev' id='v"+count[tlid]+"tl"+tlid+"' preload='metadata' src='"+nof+"'></video>"+
71. "<button type='button' id='se"+tlid+count[tlid]+"' class='editbatton btn-primary' onclick='opensmoleditwin(this)' >"+
72. "<span class='glyphicon glyphicon-cog'></span></button>"+
73. "<button type='button' id='de"+tlid+count[tlid]+"' class='dellbatton btn-primary' onclick='delroll(this)'>"+
74. "<span class='glyphicon glyphicon-trash'></span></button>";
75. setTimeout(function () {
76. var width = audioElement.duration;
77. setwidth(tlid,width);
78. }, 5000);
79. }else if (tatl=="i") {
80. var newLi = document.createElement('li');
81. newLi.className = "dragaox";
82. newLi.style="height: 45px; width:100px; margin-top: 1px; background-color: grey; border-radius: 10px; ";
83. newLi.id="bolck"+count[tlid]+"tl"+tlid;
84. ev.target.appendChild(newLi);
85. newLi.innerHTML = "<img src='"+data+"'></img>"+
86. "<button type='button' id='se"+tlid+count[tlid]+"' class='editbatton btn-primary' onclick='opensmoleditwin(this)' >"+
87. "<span class='glyphicon glyphicon-cog'></span></button>"+
88. "<button type='button' id='de"+tlid+count[tlid]+"' class='dellbatton btn-primary' onclick='delroll(this)'>"+
89. "<span class='glyphicon glyphicon-trash'></span></button>";
90. $('#bolck'+count[tlid]+"tl"+tlid).css('width', "100px");
91. $(".dragaox").draggable({
92. containment:'parent',
93. axis: "x"
94. });
95. }
96. }
97. $('#mashbut').click(function () {
98. if (boolmastab==false) {
99. for (var j = 1; j < ((counttimelines)+2); j++) {
100. var c=count[j]+1;
101. for (var i = 1; i < c ; i++) {
102. var vide= document.getElementById("v"+i+"tl"+j);
103. var width = vide.duration;
104. $('#bolck'+i+"tl"+j).css('width', width);
105. }
106. }
107. boolmastab=true;
108. }else{
109. for (var j = 1; j < ((counttimelines)+2); j++) {
110. var c=count[j]+1;
111. for (var i = 1; i < c; i++) {
112. $('#bolck'+i+"tl"+j).css('width', '80px');
113. }
114. }
115. boolmastab=false;
116. }
117. });
118. function opensmoleditwin(elem){
119. var idtonumtl=parseInt(($(elem).attr('id')).charAt(2));
120. var idtonumel=parseInt(($(elem).attr('id')).charAt(3));
121. var src = $("#v"+idtonumel+"tl"+idtonumtl).attr('src');
122. $('#smoleditwin').toggle();
123. $('#videofocat').attr('src', src);
124. }
125. function closesmoleditwin(){
126. document.getElementById('smoleditwin').style.display='none';
127. }
128. function delroll(elem){
129. var idtonumtl=parseInt(($(elem).attr('id')).charAt(2));
130. var idtonumel=parseInt(($(elem).attr('id')).charAt(3));
131. $("#bolck"+idtonumel+"tl"+idtonumtl).remove();
132. document.getElementById('smoleditwin').style.display='none';
133. }
134. function deltreack(elem){
135. var idtonum=parseInt(($(elem).attr('id')).charAt(1));
136. console.log(idtonum);
137. $("#tl"+idtonum).remove();
138. $("#contaner"+idtonum).remove();
139. startnumoftl++;
140. }
141. function playtreack() {
142. curentreac=0;
143. setvideosrc();
144. leftallprev=0;
145. }
146.
147. function chengevid(event) {
148. leftallprev=leftallprev+event.duration;
149. curentreac++;
150. setvideosrc();
151. }
152. function setvideosrc(){
153. for (var i = 1; i < (count[1]+1); i++) {
154. var index = parseInt($("#bolck"+i+"tl"+"1").index(".ui-state-default"), 10);
155. console.log(index+"--"+curentreac);
156. if (index==((curentreac)+2)) {
157. var src = $("#v"+i+"tl"+"1").attr('src');
158. console.log("bigvid"+src);
159. $('#videoPlayer').attr('src', src);
160. $('#videoPlayer')[0].play();
161. }
162. }
163. }
164. function pausetreack() {
165. $('#videoPlayer')[0].pause();
166. for (var i = 2; i <((counttimelines)+1); i++) {
167. $("#videowindow"+i)[0].pause();
168. }
169. }
170. function addvideotaimline() {
171. count[count.length]=0;
172. counttimelines++;
173. var newLi = document.createElement('div');
174. newLi.className='timeline';
175. newLi.id="tl"+counttimelines;
176. $('.timelines').append(newLi);
177.
178. newLi.innerHTML = "<div class='btn-group dropup'>"+
179. "<button type='button' class='btn btn-primary dropdown-toggle btn-default btn-lg' data-toggle='dropdown'>"+
180. "<span class='glyphicon glyphicon-facetime-video'></span></button>"+
181. "</div><ul id='v"+counttimelines+"' ondrop='drop(event,this)' class='div1' ondragover='allowDrop(event)'></ul>"+
182. "<button type='button' id='d"+counttimelines+"' class='btn btn-primary dropdown-toggle btn-default btn-lg' onclick='deltreack(this)'>"+
183. "<span class='glyphicon glyphicon-trash'></span></button>";
184. var newcon = document.createElement('div');
185. $('#videocolum').append(newcon);
186. newcon.id="contaner"+counttimelines;
187. newcon.className = "vcon ui-widget-content";
188. var newwin = document.createElement('video');
189. $('#contaner'+counttimelines).append(newwin);
190. newwin.id="videowindow"+counttimelines;
191. newwin.className = "classvideowindow";
192. $("#contaner"+counttimelines).draggable({
193. containment:'parent'
194. });
195. $( "#contaner"+counttimelines).resizable({
196. aspectRatio: 16 / 9
197. });
198. }
199. $('.delitrek').click(function(){
200. var index = parseInt($(this).index(".delitrek"), 10);
201. console.log(index);
202. });
203. function runnerupdate(event){
204. var leftpos=53+leftallprev+event.currentTime;
205. $('#runner').css('left', leftpos+'px');
206. for (var j = startnumoftl; j < ((counttimelines)+1); j++) {
207. var c=count[j]+1;
208. for (var i = 1; i < c ; i++) {
209. var posinparel=parseInt($('#bolck'+i+"tl"+j).position().left, 10);
210. var runnerposleft=parseInt($('#runner').position().left, 10);
211. if (posinparel==runnerposleft) {
212. console.log(posinparel);
213. console.log(runnerposleft);
214. var src = $("#v"+i+"tl"+j).attr('src');
215. $('#videowindow'+counttimelines).attr('src', src);
216. $('#videowindow'+counttimelines)[0].play();
217. }
218. }
219. }
220. }
221. //EXPORT
222. function exporteditdata(event){
223. var editlist="";
224. for (var j = 1; j < ((counttimelines)+2); j++) {
225. var c=count[j]+1;
226. for (var i = 2; i < c ; i++) {
227. editlist = editlist+" -i "+$("#v"+i+"tl"+j).attr('src');
228. }
229. }
230. var socket = io.connect('http://localhost:3000');
231. socket.on('news', function (data) {
232. socket.emit('editdata', editlist);
233. });
234. }
235. function saveproj(){
236. var socket = io.connect('http://localhost:3000');
237. var page=$("#editorbody").html();
238. var jsonpage=$.toJSON(page);
239. console.log("save");
240. socket.on('savereq', function (data) {
241. socket.emit('saveproj', page);
242. });
243. }
244. (function($) {
245. $(function() {
246. $('ul.tabs__caption').on('click', 'li:not(.active)', function() {
247. $(this)
248. .addClass('active').siblings().removeClass('active')
249. .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');
250. });
251. });
252. })(jQuery);
253. function addaudiotaimline() {
254. count[count.length]=0;
255. counttimelines++;
256. var newLi = document.createElement('div');
257. newLi.className='timeline';
258. newLi.id="tl"+counttimelines;
259. $('.timelines').append(newLi);
260. newLi.innerHTML = "<div class='btn-group dropup'>"+
261. "<button type='button' class='btn btn-primary dropdown-toggle btn-default btn-lg' data-toggle='dropdown'>"+
262. "<span class='glyphicon glyphicon-music'></span></button>"+
263. "</div><ul id='a"+counttimelines+"' ondrop='drop(event,this)' class='div1' ondragover='allowDrop(event)'></ul>"+
264. "<button type='button' id='d"+counttimelines+"' class='btn btn-primary dropdown-toggle btn-default btn-lg' onclick='deltreack(this)'>"+
265. "<span class='glyphicon glyphicon-trash'></span></button>";
266. }
267.
268. function addimgtaimline() {
269. count[count.length]=0;
270. counttimelines++;
271. var newLi = document.createElement('div');
272. newLi.className='timeline';
273. newLi.id="tl"+counttimelines;
274. $('.timelines').append(newLi);
275. newLi.innerHTML = "<div class='btn-group dropup'>"+
276. "<button type='button' class='btn btn-primary dropdown-toggle btn-default btn-lg' data-toggle='dropdown'>"+
277. "<span class='glyphicon glyphicon-picture'></span></button>"+
278. "</div><ul id='i"+counttimelines+"' ondrop='drop(event,this)' class='div1' ondragover='allowDrop(event)'></ul>"+
279. "<button type='button' id='d"+counttimelines+"' class='btn btn-primary dropdown-toggle btn-default btn-lg' onclick='deltreack(this)'>"+
280. "<span class='glyphicon glyphicon-trash'></span></button>";
281. var newcon = document.createElement('div');
282. $('#videocolum').append(newcon);
283. newcon.id="contaner"+counttimelines;
284. newcon.className = "icon ui-widget-content";
285. var newwin = document.createElement('img');
286. $('#contaner'+counttimelines).append(newwin);
287. newwin.id="imgwindow"+counttimelines;
288. newwin.className = "classimgwindow";
289. $("#contaner"+counttimelines).draggable({
290. containment:'parent'
291. });
292. $( "#contaner"+counttimelines).resizable({});
293. }
294. function cattreack(){
295. var vid = document.getElementById("videofocat");
296. var duration = vid.duration;
297. var startime=(duration/500)*($("#slider-range").slider("values", 0));
298. var endtime=(duration/500)*($("#slider-range").slider("values", 1));
299. }
300.
301.
302. $(function() {
303. var vid = document.getElementById("videofocat");
304. var vidrat = vid.duration;
305. var befomuvmax;
306. var befomuvmin;
307. $( "#slider-range" ).slider({
308. range: true,
309. min: 0,
310. max: 500,
311. values: [ 0, 500 ],
312. grid: true,
313. slide: function( event, ui ) {
314. $( "#amount" ).val(ui.values[ 0 ]+"--"+ui.values[ 1 ]);
315. if (befomuvmax==ui.values[ 1 ]) {
316. vid.currentTime=(ui.values[ 0 ])*(vid.duration/500);
317. }
318. if (befomuvmin==ui.values[ 0 ]) {
319. vid.currentTime=(ui.values[ 1 ])*(vid.duration/500);
320. }
321. },
322. stop: function(event, ui) {
323. befomuvmax=ui.values[ 1 ];
324. befomuvmin=ui.values[ 0 ];
325. },
326. });
327. });
328. function addtexttaimline() {
329. count[count.length]=0;
330. counttimelines++;
331. var newLi = document.createElement('div');
332. newLi.className='timeline';
333. newLi.id="tl"+counttimelines;
334. $('.timelines').append(newLi);
335. newLi.innerHTML = "<div class='btn-group dropup'>"+
336. "<button type='button' class='btn btn-primary dropdown-toggle btn-default btn-lg' data-toggle='dropdown'>"+
337. "<span class='glyphicon glyphicon-font'></span></button></div>"+
338. "<ul id='t"+counttimelines+"' ondrop='drop(event,this)' class='div1' ondragover='allowDrop(event)'><button id='"+counttimelines+"'type='button' onclick='addtext(this)'>"+
339. "<span class='glyphicon glyphicon-plus-sign'></span></button></ul>"+
340. "<button type='button' id='d"+counttimelines+"' class='btn btn-primary dropdown-toggle btn-default btn-lg' onclick='deltreack(this)'>"+
341. "<span class='glyphicon glyphicon-trash'></span></button>";
342. }
343. function addtext(elem){
344. var fulid=$(elem).attr('id');
345. var tlid=fulid.charAt(0);
346. count[tlid]++;
347. var newLi = document.createElement('li');
348. newLi.className = "dragaox";
349. newLi.style="height: 45px; width:100px; margin-top: 1px; background-color: grey; border-radius: 10px; ";
350. newLi.id="bolck"+count[tlid]+"tl"+count[tlid];
351. $("#t"+tlid).append(newLi);
352. newLi.innerHTML = "<input type='text' id='"+count[tlid]+count[tlid]+"text'/><br>"+
353. "<button type='button' id='se"+tlid+count[tlid]+"' class='editbatton btn-primary' onclick='opensmoleditwin(this)' >"+
354. "<span class='glyphicon glyphicon-cog'></span></button>"+
355. "<button type='button' id='de"+tlid+count[tlid]+"' class='dellbatton btn-primary' onclick='delroll(this)'>"+
356. "<span class='glyphicon glyphicon-trash'></span></button>";
357. $('#bolck'+count[tlid]+"tl"+tlid).css('width', "100px");
358. $(".dragaox").draggable({
359. containment:'parent',
360. axis: "x"
361. });
362. }
Allbest.ru
(-) - , avi-. , .
[41,5 K], 21.11.2014. . . . " ".
[52,1 K], 16.07.2013- , , . . . - .
[2,7 M], 17.07.2013Visual Basic. Windows API, . "Video2Bmp". : " ", " ".
[1,0 M], 29.08.2013SQL- . Interbase. " ", . .
[634,5 K], 14.07.2012" online-" , . , , . .
[1,9 M], 04.06.2009-, - . . , , , .
[1,1 M], 13.12.2014- . " ". , , , , , .
[1,6 M], 17.06.2013- Sony Vegas Pro 10.0 . . 3D Studio Max 2010. .
[2,0 M], 17.01.2013, -. . , , . .
[904,1 K], 13.04.2015
