How Hygraph Supports Visual and Video Content

tags, JavaScript-based players like Video.js or Plyr, Custom React/Next.js components Advanced Video Workflows : To support features like format conversion (e.g., MP4 to WebM), adaptive bitrate streaming (HLS, MPEG-DASH), poster frames or thumbnails, secure tokenized playback you should integrate with services like Mux , Cloudinary , or AWS Elemental MediaConvert , which can be used alongside Hygraph to handle video lifecycle management while Hygraph stores and references metadata or playback URLs. Content Modeling with Media Fields Hygraph allows media assets—such as images and videos—to be tightly integrated into content models via the Asset field. This enables structured relationships between content entries and their associated media, facilitating reusable and queryable asset references without duplicating files. Key Capabilities: Asset Field Types : Content models can include either a single asset field (one image/video per entry) or a multi-asset field (gallery-style or grouped media support). Validation Rules : While configuring asset fields, you can apply constraints on file type (e.g., only image/*, video/mp4), file size (e.g., max 10 MB), number of allowed assets (for multi-fields). Preview UI : Editors can visually select and preview media using Hygraph’s built-in media library. Thumbnail previews are available directly in the editing interface. Media Metadata via GraphQL: Each asset stores metadata fields (e.g., fileName, mimeType, width, height, size) that can be queried programmatically to build media-rich frontends or validate formats at runtime. Example GraphQL Query to Retrieve Media from a Content Entry query {post(where: { id: 'post-id-123' }) {title featuredImage {url mimeType fileName width height size}videoAsset {url mimeType fileName}}} Explanation: featuredImage and videoAsset are Asset fields defined in the Post content model. The query retrieves the media URLs and associated metadata, which can be used in your frontend to render optimized images or validate media properties dynamically. This modeling approach ensures that media assets remain decoupled from the core content, are reusable across entries, and can be handled in a scalable, query-driven way. Let me know if you want to add a content model JSON schema or Studio configuration example. Access Control and CDN Delivery Hygraph delivers all uploaded assets—images, videos, documents—via a high-performance global Content Delivery Network (CDN), ensuring fast and reliable access regardless of user location. At the same time, Hygraph provides mechanisms to manage how assets are accessed and cached. Key Access Control Mechanisms: 1.Public Asset URLs (Default Behavior) By default, all assets are publicly accessible through permanent CDN URLs. These URLs are globally cached and can be embedded directly into web applications or linked externally. 2.Token-Based URL Signing (Restricted Access) For scenarios where asset privacy is critical—such as gated content, internal documents, or paywalled videos—Hygraph supports signed URLs. These are time-limited, token-authenticated URLs that restrict asset access to authorized sessions or time windows. Example Use Case: Generate a URL valid for 10 minutes to securely share a PDF or private video asset. 3.Cached Transformations Per Query When using image transformation parameters (e.g., resizing, format conversion), each unique transformation is cached separately. This ensures that repeat requests for the same variant are served instantly while minimizing bandwidth and recompute cost. Example: A request for a resized image at 300x300 is cached independently of the original full-size image. Benefits for Developers: You retain full control over which assets are public vs. protected. You can manage secure downloads and previews without complex server-side logic. CDN caching reduces latency and bandwidth, especially for large or frequently accessed media. Hygraph: Image vs. Video Support Comparison

Boost Campaign Performance Through Video