chenbin92 / angularjs-video-playlist Goto Github PK

View Code? Open in Web Editor NEW

5.0 5.0 1.0 37.87 MB

The html5 video playlist example for angularjs

JavaScript 59.56% CSS 11.61% HTML 28.83%

angularjs-video-playlist's People

Contributors

Stargazers

Watchers

Forkers

qinwentu

angularjs-video-playlist's Issues

使用 HTML5 Video API 写一个简单的视频轮播列表(待整理)

了解 HTML5 Video API

先来看看上面一张图，是我们经常会在一些视频网站看到的交互界面；有没有想一下它的实现是怎样的，跟着下面的步骤，让我们一起来了解 HTML5 Video API：

`<video>` 元素

<video src="http://vjs.zencdn.net/v/oceans.mp4" controls="controls"></video>

这就是最简单的 video 使用，我们可以在网页得到一个视频，有默认的视频控制器，点击播放按钮可以播放，可以调节声音，播放进度等等；在很长一段时间里，我对 video 的使用也仅仅如此，它的效果如下：

在日常开发中，设计师往往不会给我们像上面那样的视频控制器的设计图，而是需要自定义视频控制器，整理了一张 HTML5 Video API 的脑图：

`video` 属性

自定义 Video control

播放、暂停
播放时间显示
音量控制
移动端禁止全屏播放

播放、暂停

JavaScript:

playBtn.addEventListener('click', function(){
    if (video.paused) {
      video.play(); // 播放
    } else {
      video.pause(); // 暂停
    }
}

播放时间显示

video.addEventListener('timeupdate', function() {
    var time = video.currentTime； // 视频当前播放时间
})

音量控制

volumeBtn.addEventListener('click', function() {
    if (video.muted) {
      video.muted = false; // 打开声音
    } else {
      video.muted = true; // 关闭声音
    }
})

移动端禁止全屏播放

// 在Hybrid app中HTML5 Video会默认使用系统的全屏播放，使用以下的方法可以禁止：
// 在 video 标签上添加 webkit-playsinline 属性
<video src="" webkit-playsinline></video>

//  设置 allowsInlineMediaPlayback 为 true
<preference name="AllowInlineMediaPlayback" value="true"/>

SVG 环形倒计时

我们知道可以通过 video.currentTime 获取视频当前播放的时间，又可以通过 video.duration 获取视频总的时间长度，那么要做视频倒计时只需要写个计时器就可以了，其实不然，计时器也是不需要的，video API 提供了 timeupdate 事件，可以监听视频帧率的改动，这样一来环形倒计时就很简单了：

var totalDuration, currentTime;
totalDuration = Math.floor(video.duration);
video.addEventListener('timeupdate', function() {
  currentTime = video.currentTime;
  timer = totalDuration - currentTime；
})

效果图

使用 Videogular 重构代码

上面介绍了 HTML5 Video API 的简单使用，可以看到 Video 提供了很多相关的属性和方法，方便开发者进行自定义；有时候，往往不需要开发者去写很多代码，一些框架或者库已经封装好了很多功能，当然，前提是你得知道最基础的知识点，才能更好的去使用

了解基本 API 之后，这里给大家介绍一个用 angularJS 编写的 HTML5 Video 库：Videogular，稍后我们会使用 Videogular 来完成一个视频列表的功能

Videogular API

Videogular 将 HTML5 Video API 提供的相关接口封装成了单独的指令，开发者可以很方便的去自定义拼装视频组件，只需要下载安装对应的模块即可，可以使用 npm install xxx 和 bower install xxx 安装

How to start

Videogular 提供了很全的文档，下面是 Videogular 提供的 how to start 的一段代码，可以看到很多以 vg-xxx 开头的指令，这就是 Videogular 对 HTML5 Video API 进行封装之后的展现形式，一个视频组件主要包括三部分部分：

videogular : 视频包装容器
vg-media ：视频媒体资源
vg-controls ：视频控制器

<div ng-app="myApp">
    <div ng-controller="HomeCtrl as controller">
        <videogular vg-theme="controller.config.theme">
            <vg-media vg-src="controller.config.sources" // 视频资源
                    vg-tracks="controller.config.tracks">
            </vg-media>

            <vg-controls> // 自定义控制器
                <vg-play-pause-button></vg-play-pause-button> // 播放按钮
                <vg-time-display>{{ currentTime | date:'mm:ss' }}</vg-time-display> // 视频时间
                <vg-scrub-bar>  // 视频进度条
                    <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
                </vg-scrub-bar>
                <vg-time-display>{{ timeLeft | date:'mm:ss' }}</vg-time-display>  // 当前播放时间
                <vg-volume> // 声音按钮
                    <vg-mute-button></vg-mute-button>
                    <vg-volume-bar></vg-volume-bar>
                </vg-volume>
                <vg-fullscreen-button></vg-fullscreen-button>  // 全屏按钮
            </vg-controls>

            <vg-overlay-play></vg-overlay-play> 
            <vg-poster vg-url='controller.config.plugins.poster'></vg-poster> // 视频封面
        </videogular>
    </div>
</div>

类似 Sworkit 的视频列表示例

参考文档：

RESTFul API design of the ...

API style

request_method url

request_method的规则：

GET：获取资源，不会改动资源
POST：创建记录
PATCH：改变资源状态或更新部分属性
PUT：更新全部属性
DELETE：删除资源

response的规则：

返回数据有 root_key，如果是数组则是资源的复数形式如 orders，单个资源的 root_key 是单数形式，如 order
返回所有model attributes

创建用户

POST /api/v1/users

return one user data

user: {
  id: 1,
  firstname: "bruce",
  lastname: "chen",
  email: " [email protected]",
  height: "172cm",
  weight: "56kg",
  created_at: "2016-03-08T07:41:15.000Z",
  updated_at: "2016-04-022T07:41:15.000Z"
}

更新用户信息

PUT /api/v1/users/:id

return one user data

user: {
  id: 1,
  firstname: "bruce",
  lastname: "chen",
  email: " [email protected]",
  height: "172cm",
  weight: "56kg",
  created_at: "2016-03-08T07:41:15.000Z",
  updated_at: "2016-04-022T07:41:15.000Z"
}

获取视频的类别

GET /api/v1/categories

return an array of workout categories data

categories: [
  {
    id: 1,
    name: "Arms",
    created_at: "2016-03-08T07:41:15.000Z",
    updated_at: "2016-04-022T07:41:15.000Z"
  }, 
  {
    id: 2,
    name: "Abs",
    created_at: "2016-03-08T07:41:15.000Z",
    updated_at: "2016-04-022T07:41:15.000Z"
  },
  {
    id: 3,
    name: "Butt",
    created_at: "2016-03-08T07:41:15.000Z",
    updated_at: "2016-04-022T07:41:15.000Z"
  },
 {
    id: 4,
    name: "Legs",
    created_at: "2016-03-08T07:41:15.000Z",
    updated_at: "2016-04-022T07:41:15.000Z"
  },
 {
    id: 5,
    name: "Full-body",
    created_at: "2016-03-08T07:41:15.000Z",
    updated_at: "2016-04-022T07:41:15.000Z"
  }
]

视频列表

GET /api/categories/:id/videos

return an array of video lists

videos: [
  {
    id: 1,
    position: 1,
    title: "Jumping Jacks",
    description: "some description",
    file: "http://vjs.zencdn.net/v/oceans.mp4",
    length: 100,
    burned_calories: 20,
    created_at: "2016-03-08T07:41:15.000Z",
    updated_at: "2016-04-022T07:41:15.000Z"
  },
{
    id: 2,
    position: 2,
    title: "Jumping Jacks",
    description: "some description",
    file: "http://vjs.zencdn.net/v/oceans.mp4",
    length: 100,
    burned_calories: 20,
    created_at: "2016-03-08T07:41:15.000Z",
    updated_at: "2016-04-022T07:41:15.000Z"
  }
]

视频详情

GET /api/categories/:id/videos/:id

return a video details

video: {
  id: 1,
  position: 1,
  title: "Jumping Jacks",
  description: "some description",
  file: "http://vjs.zencdn.net/v/oceans.mp4",
  length: 100,
  burned_calories: 20,
  created_at: "2016-03-08T07:41:15.000Z",
  updated_at: "2016-04-022T07:41:15.000Z"
}

提交锻炼的数据

POST /api/v1/users/:id/workouts

return one user workouts data

workout: {
  id: 1,
  burned_calories: 100,
  accumulated_time: "30min",
  created_at: "2016-03-08T07:41:15.000Z",
  updated_at: "2016-04-022T07:41:15.000Z"
}

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.