making a few more updates to the video element
This commit is contained in:
Tony Lea
parent
d377e27e22
commit
65f5b6c22e
@ -80,7 +80,7 @@
|
||||
"container" : {
|
||||
"accordion" : "w-full sm:p-10 p-4 box-border flex items-start justify-start max-w-lg mx-auto",
|
||||
"alert" : "w-full sm:p-10 p-4 box-border flex flex-col space-y-5 items-center justify-center max-w-3xl mx-auto",
|
||||
"badge" : "w-full sm:p-10 p-4 box-border flex items-center justify-center space-x-2",
|
||||
"badge" : "w-full sm:p-10 p-4 overflow-scroll box-border flex items-center justify-center space-x-2",
|
||||
"banner" : "w-full relative overflow-hidden",
|
||||
"breadcrumbs" : "w-full sm:p-10 p-4 box-border flex items-center justify-center mx-auto",
|
||||
"button" : "w-full sm:p-10 p-4 box-border flex space-x-3 items-center justify-center mx-auto",
|
||||
|
||||
@ -96,7 +96,7 @@
|
||||
datePickerCalculateDays();
|
||||
" x-cloak>
|
||||
<div class="container px-4 py-2 mx-auto md:py-10">
|
||||
<div class="w-64 mb-5">
|
||||
<div class="w-full mb-5">
|
||||
<label for="datepicker" class="block mb-1 text-sm font-medium text-neutral-500">Select Date</label>
|
||||
<div class="relative w-[17rem]">
|
||||
<input x-ref="datePickerInput" type="text" @click="datePickerOpen=!datePickerOpen" x-model="datePickerValue" x-on:keydown.escape="datePickerOpen=false" class="flex w-full h-10 px-3 py-2 text-sm bg-white border rounded-md text-neutral-600 border-neutral-300 ring-offset-background placeholder:text-neutral-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-400 disabled:cursor-not-allowed disabled:opacity-50" placeholder="Select date" readonly />
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<div x-data="{
|
||||
player: null,
|
||||
sources: {
|
||||
mp4: 'https://cdn.devdojo.com/pines/videos/coast.mp4',
|
||||
webm: 'https://cdn.devdojo.com/pines/videos/coast.webm',
|
||||
@ -11,8 +10,8 @@
|
||||
fullscreen: false,
|
||||
ended: false,
|
||||
mouseleave: false,
|
||||
controlsHideTimeout: null,
|
||||
autoHideControlsDelay: 3000,
|
||||
controlsHideTimeout: null,
|
||||
previewImage: null,
|
||||
poster: null,
|
||||
videoDuration: 0,
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<div x-data="{
|
||||
player: null,
|
||||
sources: {
|
||||
mp4: 'https://cdn.devdojo.com/pines/videos/coast.mp4',
|
||||
webm: 'https://cdn.devdojo.com/pines/videos/coast.webm',
|
||||
@ -11,9 +10,8 @@
|
||||
fullscreen: false,
|
||||
ended: false,
|
||||
mouseleave: false,
|
||||
controlsHideTimeout: null,
|
||||
autoHideControlsDelay: 3000,
|
||||
previewImage: null,
|
||||
controlsHideTimeout: null,
|
||||
poster: null,
|
||||
videoDuration: 0,
|
||||
timeDurationString: '00:00',
|
||||
@ -160,7 +158,7 @@
|
||||
@timeupdate="timeUpdatedInterval"
|
||||
@ended="videoEnded"
|
||||
preload="metadata"
|
||||
:poster=""
|
||||
:poster="poster"
|
||||
class="relative z-10 object-cover w-full h-full bg-black"
|
||||
crossorigin="anonymous"
|
||||
>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<div x-data="{
|
||||
player: null,
|
||||
sources: {
|
||||
mp4: 'https://cdn.devdojo.com/pines/videos/coast.mp4',
|
||||
webm: 'https://cdn.devdojo.com/pines/videos/coast.webm',
|
||||
@ -12,9 +11,8 @@
|
||||
fullscreen: false,
|
||||
ended: false,
|
||||
mouseleave: false,
|
||||
controlsHideTimeout: null,
|
||||
autoHideControlsDelay: 3000,
|
||||
previewImage: null,
|
||||
controlsHideTimeout: null,
|
||||
poster: null,
|
||||
videoDuration: 0,
|
||||
timeDurationString: '00:00',
|
||||
|
||||
33
elements/video.json
Normal file
33
elements/video.json
Normal file
@ -0,0 +1,33 @@
|
||||
{
|
||||
"data" : {
|
||||
"sources" : "The video sources for the video player. This includes the .mp4, .webm, and .ogg file to support all browsers.",
|
||||
"playing": "A boolean value that will indicate whether the video is currently playing or not.",
|
||||
"controls" : "A boolean value to show or hide the controls on the video player.",
|
||||
"muted" : "A boolean value that will mute or unmute the video player.",
|
||||
"fullscreen" : "A boolean value that will toggle the video to fullscreen.",
|
||||
"ended" : "A boolean value that will indicate whether the video has ended or not.",
|
||||
"mouseleave" : "A boolean value that will indicate whether or not the users mouse has left the video player.",
|
||||
"autoHideControlsDelay": "Delay in milliseconds before the controls will hide.",
|
||||
"controlsHideTimeout" : "The timeout interval event for hiding the controls.",
|
||||
"poster" : "The poster image for the video player.",
|
||||
"videoDuration" : "The total duration of the current video",
|
||||
"timeDurationString": "The duration of the video in '00:00' format",
|
||||
"timeElapsedString": "The time elapsed of the video in '00:00' format",
|
||||
"showTime" : "A boolean value that will indicate whether the time should be shown or not.",
|
||||
"volume" : "The current volume of the video player.",
|
||||
"volumeBeforeMute" : "We need to store the volume before we mute the video player so that we can unmute it to the correct volume.",
|
||||
"videoPlayerReady" : "A boolean value that will indicate whether the video player is ready to play or not.",
|
||||
"timelineSeek(e)" : "A function that will seek to a specific time in the video.",
|
||||
"metaDataLoaded(event)" : "A function that will be called when the video meta data has loaded.",
|
||||
"togglePlay(e)" : "A function that will toggle the video player between playing and paused.",
|
||||
"toggleMute()" : "A function that will toggle the video player between muted and unmuted.",
|
||||
"timeUpdatedInterval()" : "An interval method that will continuously be called as the video is playing.",
|
||||
"updateVolume(e)" : "A function that will update the volume of the video player.",
|
||||
"timelineClicked(e)" : "A function that will seek to a specific time in the video when the timeline is clicked.",
|
||||
"handleFullscreen()" : "A function that will set document.fullscreenElement or exit the fullscreen.",
|
||||
"mousemoveVideo()" : "A function that will fire when a mouse move event is triggered over the video.",
|
||||
"videoEnded()" : "A function that will fire when the video has ended.",
|
||||
"resetControlsTimeout()" : "A function that will reset the controls timeout.",
|
||||
"formatTime(timeInSeconds)" : "A function that will convert `seconds` to minutes and seconds"
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
<div class="not-prose">
|
||||
<h2 class="pt-0 mb-2 text-3xl font-bold tracking-tight select-none not-prose custom-font">How To Use</h2>
|
||||
</div>
|
||||
<p class="text-gray-500">Pines, is super easy to use. If your application uses Alpine and Tailwind, you can copy and paste an element into your page an it will work flawlessly. If you want to test an element on a single HTML page, you can copy/paste this snippet below into any `.html` file:</p>
|
||||
<p class="text-gray-500">Pines, is super easy to use. If your application uses Alpine and Tailwind, you can copy and paste an element into your page and it will work flawlessly. If you want to test an element on a single HTML page, you can copy/paste this snippet below into any `.html` file:</p>
|
||||
|
||||
<pre class="block w-full overflow-scroll text-sm border rounded-md hljs html border-neutral-200"><code class="hljs html"><!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user