Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for audio tags #36

Merged
3 commits merged into from
Jun 25, 2016
Merged

Add support for audio tags #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3f78f1d
Added support for audio tags
cvn Jun 24, 2016
ce56db8
Added support for audio tags in vjs-video-container
cvn Jun 25, 2016
10f531a
Updated docs to include audio tag support
cvn Jun 24, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ Next include `angular`, `video.js`, the `vjs-video` directive and it's correspon

## Basic usage

The `vjs-video` directive is designed to be non-invasive; to use it, include `vjs-video` as a dependency and add the directive to a video tag styled for `video.js`.
The `vjs-video` directive is designed to be non-invasive; to use it, include `vjs-video` as a dependency and add the directive to a video or audio tag styled for `video.js`.


First include `vjs-video` as a dependency within your angular app:
Expand All @@ -55,7 +55,7 @@ angular.module('app', [ 'vjs.video']);

```

Next, add the `vjs-video` directive to a video tag styled for `video.js`:
Next, add the `vjs-video` directive to a video or audio tag styled for `video.js`:

```html
<video class="video-js vjs-default-skin" controls preload="auto"
Expand All @@ -80,9 +80,9 @@ The following example wraps a `video.js` instance within a responsive container
</vjs-video-container>
```

> When using `vjs-video-container` be sure to attach all the directive attributes (such as `vjs-setup` or `vjs-media`) to the `vjs-video-container` element rather than on the enclosed video tag. The attributes only should be attached when using in conjunction with the `vjs-video` directive on a video tag.
> When using `vjs-video-container` be sure to attach all the directive attributes (such as `vjs-setup` or `vjs-media`) to the `vjs-video-container` element rather than on the enclosed video or audio tag. The attributes only should be attached when using in conjunction with the `vjs-video` directive on a video or audio tag.

> Also, make sure you never mix usage of `vjs-video-container` with `vjs-video`. The `vjs-video` directive accepts the same directive attributes but shouldn't be used if a video tag is wrapped inside of a `vjs-video-container`.
> Also, make sure you never mix usage of `vjs-video-container` with `vjs-video`. The `vjs-video` directive accepts the same directive attributes but shouldn't be used if a video or audio tag is wrapped inside of a `vjs-video-container`.

## Directive Attributes

Expand Down
14 changes: 9 additions & 5 deletions app/scripts/directives/vjs.directive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@
window.videojs.VERSION : '0.0.0';
}

function isMediaElement(element) {
return element[0].nodeName === 'VIDEO' || element[0].nodeName === 'AUDIO';
}

module.controller('VjsVideoController', ['$scope', function ($scope) {
var self = this;

Expand All @@ -28,7 +32,7 @@
}

if (isContainer) {
videos = element[0].getElementsByTagName('video');
videos = element[0].querySelectorAll('video, audio');
if (videos.length === 0) {
throw new Error('video tag must be defined within container directive!');
} else if (videos.length > 1) {
Expand All @@ -37,10 +41,10 @@

vid = videos[0];
} else {
if (element[0].nodeName === 'VIDEO') {
if (isMediaElement(element)) {
vid = element[0];
} else {
throw new Error('directive must be attached to a video tag!');
throw new Error('directive must be attached to a video or audio tag!');
}
}

Expand Down Expand Up @@ -190,7 +194,7 @@
var opts = params.vjsSetup || {},
ratio = params.vjsRatio,
isValidContainer =
((element[0].nodeName !== 'VIDEO') && !getVersion().match(/^5\./)) ? true : false,
(!isMediaElement(element) && !getVersion().match(/^5\./)) ? true : false,
mediaWatcher;

if (!window.videojs) {
Expand Down Expand Up @@ -355,7 +359,7 @@
var vid,
origContent,
mediaChangedHandler = function (e) {
var vidEl = element[0].querySelector('video');
var vidEl = element[0].querySelector('video, audio');

if (vidEl) {
//remove any inside contents
Expand Down
21 changes: 21 additions & 0 deletions test/spec/directives/vjs.directive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,18 @@ describe('Directive: vjs.directive.js', function () {
var vidStr = "<video vjs-video></video>",
vidWithIdStr = "<video id='vidId' vjs-video></video>",
multipleVidStr = "<div><video vjs-video></video><video vjs-video></video></div>",
audioStr = "<audio vjs-video></audio>",
nonVidStr = "<div vjs-video>",
vidContainerStr = "<div vjs-video-container><video></video></div>",
vidElementContainerStr = "<vjs-video-container><video></video></vjs-video-container>",
vidElementContainerVjsVidStr = "<vjs-video-container><video vjs-video></video></vjs-video-container>",
vidElementContainerVjsSetupStr = "<vjs-video-container><video vjs-setup></video></vjs-video-container>",
vidElementContainerVjsMediaStr = "<vjs-video-container><video vjs-media></video></vjs-video-container>",
vidElementContainerVjsRatioStr = "<vjs-video-container><video vjs-ratio></video></vjs-video-container>",
audioContainerStr = "<div vjs-video-container><audio></audio></div>",
nonVidContainerStr = "<div vjs-video-container></div>",
multVidsContainerStr = "<div vjs-video-container><video></video><video></video></div>",
multMixedContainerStr = "<div vjs-video-container><video></video><audio></audio></div>",
vidContainerWithDimsStr = "<div vjs-video-container><video id='vid-dim' width='320' height='320'></video></div>",
vidRatioCharStr = "<div vjs-video-container vjs-ratio='asdf'><video></video></div>",
vidRatioInvalidStr = "<div vjs-video-container vjs-ratio='1920:1080:720'><video></video></div>",
Expand Down Expand Up @@ -50,6 +53,12 @@ describe('Directive: vjs.directive.js', function () {
expect(el.hasClass('vjs-tech')).to.be.true;
});

it('should attach videojs to the audio tag', function () {
//videojs should add at vjs-tech class to the element
var el = compileAndLink(audioStr, scope);
expect(el.hasClass('vjs-tech')).to.be.true;
});

it('should attach videojs to multiple video tags', function () {
//videojs should add at vjs-tech class to the element
var el = compileAndLink(multipleVidStr, scope);
Expand Down Expand Up @@ -253,12 +262,24 @@ describe('Directive: vjs.directive.js', function () {
}).throws(Error, 'only one video can be defined within the container directive!');
});

it('should throw an error if container defines more than one media tag', function () {
expect(function () {
compileAndLink(multMixedContainerStr, scope);
}).throws(Error, 'only one video can be defined within the container directive!');
});

it('should attach videojs to the video tag', function () {
//videojs should add at vjs-tech class to the element
var el = compileAndLink(vidContainerStr, scope);
expect(el.find('video').hasClass('vjs-tech')).to.be.true;
});

it('should attach videojs to the audio tag', function () {
//videojs should add at vjs-tech class to the element
var el = compileAndLink(audioContainerStr, scope);
expect(el.find('audio').hasClass('vjs-tech')).to.be.true;
});

it('should register as the vjs-video-container element', function () {
//videojs should add at vjs-tech class to the element
var el = compileAndLink(vidElementContainerStr, scope);
Expand Down