You can use the data-vimeo-defer attribute to prevent that from happening and create the embed at a later time. These options are available to use as data-vimeo- attributes on elements or as an object passed to the Vimeo.
Player constructor. More information on embed options can be found in the Vimeo Help Center. All methods, except for on and off return a Promise. The Promise may or may not resolve with a value, depending on the specific method. Promises for setters are resolved with the value set, or rejected with an error if the set fails. For example:. Add an event listener for the specified event. Will call the callback with a single parameter, data , that contains the data for that event.
See events below for details. Remove an event listener for the specified event. Load a new video into this embed. The promise will be resolved if the video is successfully loaded, or it will be rejected if it could not be loaded. NOTE: If the video privacy settings are "Private", instead of providing an id argument, you will need to provide the full video URL as a url argument and include the h parameter.
Trigger a function when the player iframe has initialized. You do not need to wait for ready to trigger to begin adding event listeners or calling other methods. Enable the text track with the specified language, and optionally the specified kind captions or subtitles.
Note: on iOS and some other mobile devices, you cannot programmatically trigger play. Once the viewer has tapped on the play button in the player, however, you will be able to use this function. Enable or disable the autopause behavior of this player. By default, when another video is played in the same browser, this player will automatically pause. Unless you have a specific reason for doing so, we recommend that you leave autopause set to the default true.
Get the current chapter. A chapter is "current" when the currentTime of the video is equal to or after its startTime and before the startTime of the next chapter or the end of the video. Set the color of this player to a hex or rgb string. Setting the color may fail if the owner of the video has set their embed preferences to force a specific color.
Add a cue point to the player. Cue points fire a cuepoint event when the currentTime of the video passes the specified time. Note: cue points should be accurate to within a tenth of a second, but the precision may vary based on browser or environment. Remove the specified cue point using the id returned from addCuePoint or from getCuePoints. Set the current playback position in seconds. Once playback has started, if the player was paused, it will remain paused.
Likewise, if the player was playing, it will resume playing once the video has buffered. Setting the current time before playback has started will cause playback to start.
You can provide an accurate time and the player will attempt to seek to as close to that time as possible. The exact time will be the fulfilled value of the promise. Get the duration of the video in seconds. It will be rounded to the nearest second before playback begins, and to the nearest thousandth of a second after playback begins. Get the ended state of the video. Set the loop state of the player. When set to true , the player will start over immediately once playback ends.
Note: when loop is turned on, the ended event will not fire. Set the muted state of the player. When set to true , the player volume will be muted. Get the playback rate of the player on a scale from 0. Set the playback rate of the player on a scale from 0. When set via the API, the playback rate will not be synchronized to other players or stored as the viewer's preference. Kind can be either captions or subtitles. The mode can be either showing or disabled.
Only one track can be showing at any given time; the rest will be disabled. The width of the highest resolution available will be used before playback begins.
The height of the highest resolution available will be used before playback begins. Get the current volume level of the player on a scale from 0 to 1.
Most mobile devices do not support an independent volume from the system volume. In those cases, this method will always return 1. Set the volume of the player on a scale from 0 to 1. Most mobile devices including iOS and Android do not support setting the volume because the volume is controlled at the system level. An error will not be triggered in that situation. You can listen for events in the player by attaching a callback using. The events are equivalent to the HTML5 video events except for cuechange , which is slightly different.
Triggered any time the video playback reaches the end. Triggered as the currentTime of the video updates. It generally fires every ms, but it may vary depending on the browser.
Triggered as the video is loaded. Reports back the amount of the video that has been buffered. Triggered when the player starts seeking to a specific time. A timeupdate event will also be fired at the same time.
Triggered when the player seeks to a specific time. The values will be null if text tracks are turned off. The index property of each chapter is the place it holds in the order of all the chapters. It starts at 1. Triggered when the active cue for the current text track changes. It also fires when the active text track changes.
There may be multiple cues active. The text property of each cue is the raw value parsed from the caption or subtitle file. The data property will be the custom data provided in the addCuePoint call, or an empty object if none was provided. Triggered when the volume in the player changes. Some devices do not support setting the volume of the video independently from the system volume, so this event will never fire on those devices. Therefore, each time the playProgress event fires, we store the percentage location it reports in an array.
That way we end up with an array that contains the locations as percentage values of all the video sections that have been watched. For example, if the user watches the first three percent of the video, the array will contain [0, 1, 2]. If they then jump to the middle, and watch another 3 percent, the array will contain [0, 1, 2, 50, 51, 52].
Given this array, we can easily calculate what overall percentage of the video has been watched by counting the items in the array. For this, we need the following listener function:. So far, the data is only available on the client side; we will want to send it back to the server. The playProgress event fires very often, so it would not be efficient to send the data each time.
Instead, we set up a timer that triggers a server update every 30 seconds. The data is sent back to the server using a post request. With these set up, we have a working progression tracking feature on the frontend, but there are two potential issues:. To address the first issue, we set up a listener function for the pause event, which posts the data as soon as the video pauses.
To eliminate the second issue, we note the timestamp of the last time that the progress was updated, and only send data to the server if there has been any progress since the last time.
This necessitates changes to the vimeoPlayProgressEvent and the updateProgress function. As far as the frontend is concerned, the code snippets discussed here complete the progression tracking functionality. This enhancement allows for two new features: Users are able to keep track of their progression during a course, which may consist of many videos. Courses can now offer completion certificates to users who have completed certain courses. For this, we need the following listener function: plnzVideoTracker.
If the user keeps the video page open, but does not watch the video, the same set of data will be posted back to the server repeatedly.
0コメント