Pedram Made The Video Player A Component And Fixed Video Display Page

temp
Pedram Keshavarzi 3 years ago
parent a26e542bee
commit bd10e7be1a
  1. 0
      src/components/VideoPlayer/index.css
  2. 19
      src/components/VideoPlayer/index.js
  3. 24
      src/views/VideoDisplay/Desktop/index.js

@ -0,0 +1,19 @@
import React from "react";
import './index.css';
const VideoPlayer = ({
playerWidth,
}) => {
return(
<video style={{ width: playerWidth, }} controls>
<source
src={`https://dnvn.ir/api/v1/file/20540`}
type="video/mp4"
/>
</video>
);
};
export default VideoPlayer;

@ -1,16 +1,21 @@
import React from "react";
import CourseChapter from "../../../components/CourseChapter";
import VideoPlayer from "../../../components/VideoPlayer";
const DesktopVideoDisplay = () =>{
return(
<div className="w-full flex flex-col px-4 items-center">
<div className="w-11/12 flex flex-col mb-6 items-center">
<div className="w-full flex flex-row flex-1 justify-between items-center overflow-hidden relative">
<video style={{ width: "70%", }} controls>
<source
src={`https://dnvn.ir/api/v1/file/20540`}
type="video/mp4"
/>
</video>
<div className="w-4/5 flex flex-col mb-6 justify-center items-center">
<div className="w-full flex flex-row flex-1 justify-center overflow-hidden relative">
<div className="flex flex-col w-4/5">
<VideoPlayer playerWidth='100%' />
<h1 className="mx-4 my-2 text-4xl text-blue52 py-6 border-b-2 border-solid border-gray-300">ساز های باستانی ایران عزیز</h1>
<p className="m-4 text-gray-600">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p>
</div>
<CourseChapter />
</div>
{/* <div className="flex flex-col flex-1 justify-between pr-2">
@ -22,6 +27,9 @@ const DesktopVideoDisplay = () =>{
</div>
<Divider type={"vertical"} />
</div> */}
<div>
</div>
</div>
</div>
);

Loading…
Cancel
Save