Video Solution(1)Video Framework and Frontend Solution

最新推荐文章于 2025-05-04 06:00:00 发布

原创最新推荐文章于 2025-05-04 06:00:00 发布 · 237 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#git #移动开发 #数据库

Summary 专栏收录该内容

381 篇文章

订阅专栏

本文介绍了如何使用HTML5标准格式mp4进行视频播放，并利用Video.js框架实现跨平台兼容。此外，还详细记录了从搭建Node.js环境到使用Cordova及Ionic构建移动应用的全过程，包括项目配置、构建及部署等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Video Solution(1)Video Framework and Frontend Solution

Convert to Standard mp4 format for HTML5
App ‘Free MP4 Converter'

Video Play JS Framework
Check the CDN Version for HTML5 video player
http://videojs.com/getting-started/

Place the index.html and video in the same directory
<html>
<head>
<link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">


<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="诛仙青云志01.mp4" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="http://vjs.zencdn.net/5.8.8/video.js"></script>
</body>

</html>

It works pretty well. I will try with nginx and try to see if it works great from remote server.

Mobile and Web Solution
Set up Latest NodeJS
> wget https://nodejs.org/dist/v6.9.1/node-v6.9.1.tar.gz
…snip...
> ./configure --prefix=/Users/carl/tool/node-v6.9.1
…snip...
We have the latest version on my MAC system
> node --version
v6.9.1

Install latest cordova and ionic
> npm install -g cordova ionic

Check the version after installation
> cordova --version
6.4.0

> ionic --version
2.1.13

Dependency warning - for the CLI to run correctly,
it is highly recommended to install/upgrade the following:

Install ios-sim to deploy iOS applications.`npm install -g ios-sim` (may require sudo)
Install ios-deploy to deploy iOS applications to devices. `npm install -g ios-deploy` (may require sudo)

> npm install -g ios-sim
> npm install -g ios-deploy

Check all the settings with First Sample Project
> ionic start smart-fisher tabs

try with iOS
> ionic build ios
Deploy to emulator
> ionic emulate ios
We can specify the device version
> ionic emulate ios --target="iPhone-6"

try with Android
> ionic platform add android
> ionic build android

I am using genymotion, start the device emulator from genymotion.

start app on device
> ionic run android

try Web Browser
> ionic serve --lab

The page will automatically open
http://localhost:8100/ionic-lab

The ‘real’ web version will be like this
> ionic serve
http://localhost:8100/#/tab/dash

Create a new version Project
> ionic start myionic2project tutorial --v2
> ionic serve

Visit page http://localhost:8100/
TS version Project
> ionic start myionic2project2 tutorial --v2 --ts

Ionic2 Sample Project
https://github.com/chsakell/ionic2-angular2-firebase
https://chsakell.com/2016/08/27/building-hybrid-mobile-apps-using-ionic-2-and-firebase/

blog
https://github.com/jackhutu/jackblog-ionic2

resturant
https://github.com/srehanuddin/Ionic2-ResturantApp

Check the Blog Example First, Set up the Server side
> git clone https://github.com/jackhutu/jackblog-api-express.git

Go to the directory
> npm install
> npm install -g gulp
> gulp serve

On my local, maybe my local 9000 is used, so I open the server settings in file
server/config/env/index.js and change the port number from 9000 to 9001

I start my local Redis
> bin/redis-server

I start my local mongodb
> mongod -f conf/mongodb.conf

Then I can start the express server and get the page
http://localhost:9001

Download and try this IDE
http://www.nodeclipse.org/

The reactJS version
> git clone https://github.com/jackhutu/jackblog-react.git

Since I change the server side to 9001, so I update the config on the client in src/config.js

Visit page
http://localhost:3000/

Still need angularJS2 and ionic2
https://github.com/jackhutu/jackblog-ionic2
https://github.com/jackhutu/jackblog-angular2
https://github.com/jackhutu/jackblog-admin

References:
http://videojs.com/getting-started/
http://framework7.io/get-started/

https://www.ekreative.com/blog/using-ionic-2-with-angular-2-to-make-a-hologram-projector-app

ionic UI
http://sillycat.iteye.com/blog/2284701 Installation
http://sillycat.iteye.com/blog/2285319 Installation and TypeScript
http://sillycat.iteye.com/blog/2285543 TypeScript
http://sillycat.iteye.com/blog/2285848 project structure
http://sillycat.iteye.com/blog/2342392 Options to start backend and front end development

Python framework
For high volume traffic, a non-blocking framework like Tornado is a good choice. For CMS-type systems (or if you're happy with the routing/templating/database stack that's built in by default) Django is easy to get going with, while Pylons (now Pyramid) provides more flexibility. CherryPy offers a simpler approach for relatively small projects.

Others mentioned:

- Flask http://flask.pocoo.org/
- Pyjamas, http://pyjs.org/
- Web.py, http://webpy.org/