diff --git a/README.md b/README.md index 2ad6307..b1902d4 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,7 @@ instance of a `video.js` player. #### Using `<source>` ```html -<video id="video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'> +<video id="video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"> <source src="https://example.com/video_720.mp4" type="video/mp4" label="720P"> <source src="https://example.com/video_480.mp4" type="video/mp4" label="480P" selected="true"> <source src="https://example.com/video_360.mp4" type="video/mp4" label="360P"> @@ -114,7 +114,11 @@ There are at least two ways to add the quality selector control to the player's bar. The first is directly adding it via `addChild`. For example: ```js -player.controlBar.addChild('QualitySelector'); +videojs('video_1', {}, function() { + var player = this; + + player.controlBar.addChild('QualitySelector'); +}); ``` The second option is to add the control via the player's options, for instance: diff --git a/docs/demo/index.html b/docs/demo/index.html index 07e2d91..b90232c 100644 --- a/docs/demo/index.html +++ b/docs/demo/index.html @@ -11,7 +11,7 @@ <body> <h1>Demo of <code>videojs-quality-selector</code></h1> - <video id="video_1" class="video-js vjs-default-skin" controls preload="auto" data-setup='{}'> + <video id="video_1" class="video-js vjs-default-skin" controls preload="auto"> <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.720p.webm" type="video/webm" label="720P"> <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.480p.webm" type="video/webm" label="480P" selected="true"> <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm/Caminandes_3_-_Llamigos_-_Blender_Animated_Short.webm.360p.webm" type="video/webm" label="360P"> @@ -19,7 +19,7 @@ </video> <script> - videojs("video_1", {}, function() { + videojs('video_1', {}, function() { var player = this; player.controlBar.addChild('QualitySelector');