diff --git a/src/js/modules/webslides.js b/src/js/modules/webslides.js index b9f6977..7198bfa 100644 --- a/src/js/modules/webslides.js +++ b/src/js/modules/webslides.js @@ -19,7 +19,7 @@ const PLUGINS = { 'nav': Plugins.Navigation, 'scroll': Plugins.Scroll, 'touch': Plugins.Touch, - 'video': Plugins.Video, + 'media': Plugins.Media, 'youtube': Plugins.YouTube, 'zoom': Plugins.Zoom }; diff --git a/src/js/plugins/video.js b/src/js/plugins/media.js similarity index 57% rename from src/js/plugins/video.js rename to src/js/plugins/media.js index 39f40fc..1318beb 100644 --- a/src/js/plugins/video.js +++ b/src/js/plugins/media.js @@ -5,7 +5,7 @@ import {default as Slide, Events as SlideEvents} from '../modules/slide'; * Video plugin. Video plugin that allows to autoplay videos once the slide gets * active. */ -export default class Video { +export default class Media { /** * @param {WebSlides} wsInstance The WebSlides instance. * @constructor @@ -17,24 +17,24 @@ export default class Video { */ this.ws_ = wsInstance; - const videos = DOM.toArray(this.ws_.el.querySelectorAll('video')); + const medias = DOM.toArray(this.ws_.el.querySelectorAll('video,audio')); - if (videos.length) { - videos.forEach(video => { - if (!video.hasAttribute('autoplay')) { + if (medias.length) { + medias.forEach(media => { + if (!media.hasAttribute('autoplay')) { return; } - video.removeAttribute('autoplay'); - video.pause(); - video.currentTime = 0; - const {i} = Slide.getSectionFromEl(video); + media.removeAttribute('autoplay'); + media.pause(); + media.currentTime = 0; + const {i} = Slide.getSectionFromEl(media); const slide = wsInstance.slides[i - 1]; - slide.video = video; + slide.media = media; - slide.el.addEventListener(SlideEvents.ENABLE, Video.onSectionEnabled); - slide.el.addEventListener(SlideEvents.DISABLE, Video.onSectionDisabled); + slide.el.addEventListener(SlideEvents.ENABLE, Media.onSectionEnabled); + slide.el.addEventListener(SlideEvents.DISABLE, Media.onSectionDisabled); }); } } @@ -44,7 +44,7 @@ export default class Video { * @param {CustomEvent} event */ static onSectionEnabled(event) { - event.detail.slide.video.play(); + event.detail.slide.media.play(); } /** @@ -52,6 +52,6 @@ export default class Video { * @param {CustomEvent} event */ static onSectionDisabled(event) { - event.detail.slide.video.pause(); + event.detail.slide.media.pause(); } } diff --git a/src/js/plugins/plugins.js b/src/js/plugins/plugins.js index 038eb85..cb6635c 100644 --- a/src/js/plugins/plugins.js +++ b/src/js/plugins/plugins.js @@ -6,7 +6,7 @@ import Keyboard from './keyboard'; import Navigation from './navigation'; import Scroll from './scroll'; import Touch from './touch'; -import Video from './video'; +import Media from './media'; import YouTube from './youtube'; import Zoom from './zoom'; @@ -19,7 +19,7 @@ export default { Navigation, Scroll, Touch, - Video, + Media, YouTube, Zoom }; diff --git a/test/modules/webslides.test.js b/test/modules/webslides.test.js index 6412f3f..de4c9d0 100644 --- a/test/modules/webslides.test.js +++ b/test/modules/webslides.test.js @@ -51,7 +51,7 @@ test('Should have correct properties', () => { expect(webslides.plugins.nav).toBeDefined(); expect(webslides.plugins.scroll).toBeDefined(); expect(webslides.plugins.touch).toBeDefined(); - expect(webslides.plugins.video).toBeDefined(); + expect(webslides.plugins.media).toBeDefined(); expect(webslides.plugins.youtube).toBeDefined(); expect(webslides.plugins.zoom).toBeDefined(); diff --git a/test/plugins/video.test.js b/test/plugins/media.test.js similarity index 95% rename from test/plugins/video.test.js rename to test/plugins/media.test.js index 294e465..9206277 100644 --- a/test/plugins/video.test.js +++ b/test/plugins/media.test.js @@ -1,4 +1,4 @@ -import Video from '../../src/js/plugins/video'; +import Video from '../../src/js/plugins/media'; import DOM from '../../src/js/utils/dom'; beforeAll(() => {