تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يسمح جهاز استقبال الوسائط ذو الأنماط (SMR) لتطبيق المرسِل بتشغيل الوسائط على
جهاز بث بدون إنشاء تطبيقك المخصص للاستقبال. يمكنك
تخصيص نظام ألوان SMR والعلامة التجارية من خلال توفير ملف CSS الخاص بك
أثناء التسجيل.
تسجيل
لاستخدام SMR في تطبيقك، حدِّد الخيار Styled MediaRecipient.
عند إضافة تطبيق جديد في
وحدة تحكّم المطوّرين لحزمة تطوير البرامج (SDK) لتكنولوجيا Google Cast:
يمكنك الاطّلاع على التسجيل للحصول على مزيد من المعلومات. هذا الخيار
يتضمن رابطًا إلى معاينة ورقة الأنماط الافتراضية بالإضافة إلى حقل حيث
تدخل عنوان URL إلى ورقة الأنماط. يمكنك إما استخدام الأنماط الافتراضية أو
أدخِل عنوان URL الذي يستخدم HTTPS إلى ملف CSS. يمكنك استخدام خادمك الخاص لاستضافة
CSS. بعد تقديم عنوان URL لملف CSS، يمكنك النقر على معاينة.
لمعرفة كيف ستبدو الأنماط على شاشة المُستلِم
الوسائط المتوافقة
تتوافق جميع أجهزة الاستقبال مع أنواع الوسائط، كما هو موضح في
الوسائط المتوافقة:
يدعم نظام SMR مقاطع الفيديو والصوت والصور ويتحكم فيها المرسِل.
التطبيق باستخدام قناة وسائط Cast SDK. يتوافق SMR بالكامل مع
إرشادات تجربة المستخدم لتشغيل الوسائط على جهاز بث
كتابة الخطوط
راجع الخطوط المثبتة مسبقًا للحصول على قائمة
والخطوط المثبتة مسبقًا مع جهاز الاستقبال.
CSS
يستخدم جهاز استقبال الوسائط ذو الأنماط الحالية فئات CSS التالية:
.background: خلفية المُستلِم.
.logo: الشعار الذي يظهر عند تشغيل جهاز الاستقبال هذا الصف أيضًا
يتم استخدامها عندما يكون المُستلِم في حالة "عدم النشاط" ولا تكون فئة البداية
الذي تم الإفصاح عنه.
.progressBar: شريط التقدّم لتشغيل الوسائط
.splash: هي الشاشة التي تظهر عندما يكون جهاز الاستقبال في حالة عدم النشاط. إذا كان هذا
لم يتم تعريف الفئة، سينتقل المُستلِم تلقائيًا إلى الشعار .logo أو اسم التطبيق.
وفي ما يلي بعض الرسوم التوضيحية لهذه الفئات قيد الاستخدام.
فيديو
ملاحظة: يبلغ حجم صورة الفيديو 96×143 بكسل ومصدر الصورة الأول هو مورد الصورة.
المرتبطة بالبيانات الوصفية للوسائط لعرضها. تم تغيير حجم الصور إلى
لتناسب الأبعاد المتوقعة.
الصوت
ملاحظة: يبلغ حجم صورة ألبوم المقاطع الصوتية 384×384 بكسل ومصدر الصورة الأول هو
المرتبطة بالبيانات الوصفية للوسائط لعرضها. تم تغيير حجم الصور إلى
لتناسب الأبعاد المتوقعة.
صور من Big Buck Bunny: (c) حقوق الطبع والنشر لعام 2008،
Blender Foundation / www.bigbuckbunny.org
صورة من Sintel: (c) حقوق الطبع والنشر لمؤسسة Blender Foundation / www.sintel.org
تاريخ التعديل الأخير: 2025-07-25 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-07-25 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\u003cp\u003eThe Styled Media Receiver (SMR) lets you play media on Cast devices without building a custom receiver application, offering branding customization through a CSS file.\u003c/p\u003e\n"],["\u003cp\u003eRegister your application in the Google Cast SDK Developer Console, selecting "Styled Media Receiver" and providing a link to your CSS for customization.\u003c/p\u003e\n"],["\u003cp\u003eThe SMR supports various media types (video, audio, images) and adheres to Cast UX guidelines, controlled by your sender application using the Cast SDK media channel.\u003c/p\u003e\n"],["\u003cp\u003eCustomize the appearance of the receiver using CSS classes for background, logo, progress bar, splash screen, and watermark, with provided examples for styling.\u003c/p\u003e\n"]]],["The Styled Media Receiver (SMR) enables media playback on Cast devices without a custom receiver app. During registration in the Google Cast SDK Developer Console, you can select SMR and customize its appearance. This involves providing a CSS file URL or using default styles. The SMR supports video, audio, and images, utilizing CSS classes like `.background`, `.logo`, `.progressBar`, `.splash`, and `.watermark` for styling. You can adjust the SMR display when launching, playing media, or on idle state using the appropriate CSS class.\n"],null,["# Styled Media Receiver\n\nThe Styled Media Receiver (SMR) allows your sender application to play media on\na Cast device without creating your own custom receiver application. You can\ncustomize the SMR color scheme and branding by providing your own CSS file\nduring registration.\n\nRegistration\n------------\n\nTo use the SMR for your application select the **Styled Media Receiver** option\nwhen you add a new application in the\n[Google Cast SDK Developer Console](https://cast.google.com/publish).\nSee [Registration](/cast/docs/registration) for more information. This option\nincludes a link to **Preview** the default style sheet as well as a field where\nyou enter the URL to your style sheet. You can either use the default styles or\nprovide the HTTPS URL to your CSS file. You can use your own server to host the\nCSS file. Once you provide the URL to your CSS file, you can click **Preview**\nto see how your styles will look on the receiver.\n| **Note:** If you register a Styled Media Receiver, but just use the default styles, the receiver displays your application name when the receiver is loading or in the idle state.\n\nSupported media\n---------------\n\nAll receivers support the media types, as described in\n[Supported Media](/cast/docs/media).\n\nThe SMR supports video, audio and images and is controlled from a sender\napplication using the Cast SDK media channel. The SMR fully complies with the\n[UX Guidelines](/cast/docs/ux_guidelines) for media playback on a Cast device.\n\nType fonts\n----------\n\nSee [Pre-installed fonts](/cast/docs/receiver_apps#fonts) for a list of\nfonts pre-installed with the receiver.\n\nCSS\n---\n\nThe Styled Media Receiver uses the following CSS classes:\n\n- **.background**: The background for the receiver.\n- **.logo**: The logo shown when the receiver is launching. This class is also used when the receiver is in the idle state and no .splash class is declared.\n- **.progressBar**: The progress bar for media playback.\n- **.splash**: The screen shown when the receiver is in an idle state. If this class is not declared, the receiver will default to .logo or the app name.\n- **.watermark**: A watermark shown when the media is playing.\n\nHere is an example CSS file that uses these classes: \n\n```gas\n.background {\n background: center no-repeat url(background.png);\n}\n\n.logo {\n background-image: url(logo.png);\n}\n\n.progressBar {\n background-color: rgb(238, 255, 65);\n}\n\n.splash {\n background-image: url(splash.png);\n}\n\n.watermark {\n background-image: url(watermark.png);\n background-size: 57px 57px;\n}\n```\n\nFollowing are some illustrations of these classes in use.\n\n#### Video\n\n**Note**: The video image art is 96x143 pixels and the first image resource\nassociated with the media metadata is selected for display. Images are scaled to\nfit the expected dimensions.\n\n#### Audio\n\n**Note**: The audio album art is 384x384 pixels and the first image resource\nassociated with the media metadata is selected for display. Images are scaled to\nfit the expected dimensions.\n\n\nImages from Big Buck Bunny: (c) copyright 2008,\nBlender Foundation / www.bigbuckbunny.org\n\nImage from Sintel: (c) copyright Blender Foundation / www.sintel.org"]]
