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 React from "react";
import CourseChapter from "../../../components/CourseChapter"; import CourseChapter from "../../../components/CourseChapter";
import VideoPlayer from "../../../components/VideoPlayer";
const DesktopVideoDisplay = () =>{ const DesktopVideoDisplay = () =>{
return( return(
<div className="w-full flex flex-col px-4 items-center"> <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-4/5 flex flex-col mb-6 justify-center items-center">
<div className="w-full flex flex-row flex-1 justify-between items-center overflow-hidden relative"> <div className="w-full flex flex-row flex-1 justify-center overflow-hidden relative">
<video style={{ width: "70%", }} controls> <div className="flex flex-col w-4/5">
<source
src={`https://dnvn.ir/api/v1/file/20540`}
type="video/mp4" <VideoPlayer playerWidth='100%' />
/>
</video> <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 /> <CourseChapter />
</div> </div>
{/* <div className="flex flex-col flex-1 justify-between pr-2"> {/* <div className="flex flex-col flex-1 justify-between pr-2">
@ -22,6 +27,9 @@ const DesktopVideoDisplay = () =>{
</div> </div>
<Divider type={"vertical"} /> <Divider type={"vertical"} />
</div> */} </div> */}
<div>
</div>
</div> </div>
</div> </div>
); );

Loading…
Cancel
Save