郑依依我老婆

已于 2024-12-20 00:43:51 修改
阅读量194 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： 前端 typescript
于 2024-12-19 20:58:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zl834205311/article/details/130398399 
//设置屏幕全屏显示
windowStage.getMainWindow((err, data) => {
  if (!err.code) {
    data.setWindowLayoutFullScreen(true)
  }

})

//配置网络协议
"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
],

UI

import router from '@ohos.router';
import http from '@ohos.net.http';
import { it } from '@ohos/hypium';

interface videoListInterFaceALL {
  id: string,
  ctime: string,
  title: string,
  description: string,
  source: string,
  picUrl: string
  videoUrl: string
  isLocal: boolean,
  num: number,
  videoList:videoListInterFace[]
}


interface videoListInterFace {
  id: string,
  ctime: string,
  title: string,
  description: string,
  source: string,
  picUrl: string
  videoUrl: string
  isLocal: boolean,
  num: number

}



interface resultInterFace{
  curpage:number,
  allnum:number,
  newslist:videoListInterFace[]
}


@Entry
@Component
struct Index {
  @State isLocal: boolean = true;
  @State title: string = ""
  @State preUrl: string = ""
  @State num: number = 0
  @State videoUrl: string = ""
  @State newList: videoListInterFaceALL[] = []
  @State videoList: videoListInterFace[] = []
  @State requestUrl:string="https://apis.tianapi.com/film/index"

  aboutToAppear(): void {

    let requestUrl:string="https://apis.tianapi.com/film/index"

    let httpReq=http.createHttp();

    let promisData= httpReq.request(requestUrl,
      {   method:http.RequestMethod.GET,
        expectDataType:http.HttpDataType.OBJECT,
        extraData:{
          "key":"51a245a9f84d7f2d953118bdb9ef6517",
          "num":"50"
        }
    })

    promisData.then((response)=>{

this.newList=response.result['result'];

this.videoList=this.newList['newslist']



    })


  }




  build() {
    Column() {
      Row() {
        Image($r("app.media.ic_back")).width(22).height(22).margin({ left: 10 })

        Text("视频播放器").fontSize(22).fontColor(Color.White).layoutWeight(1).textAlign(TextAlign.Center)

      }.width('100%')
      .height(30)
      .margin({ top: 35 })


      Video(
        {
          src: $rawfile("1.mp4"),
          previewUri: $r("app.media.banner1")
        }
      )
        .width('95%')
        .height(250)
        .autoPlay(true)
        .loop(true)
        .controls(false)
        .borderRadius(15)



      Grid() {
        //本地视频

        GridItem() {
          Column() {
            Image($r('app.media.banner1')).width("100%")
              .height(180).padding(10)
              .borderRadius(15)
            Text("本地视频1").fontSize(14).fontColor(Color.White)
          }.width('100%')
          .height('100%')

        }.height(200)
        .padding(10)
        .borderRadius(15)
        .onClick(() => {
          router.pushUrl({
            url: "pages/videoPlayer",
            params: {
              isLocal:true,
              num:-2,
              title:"本地视频1",
              preUrl:"app.media.banner1",
              videoUrl:"1.mp4",
              videoList:this.videoList
            }
          })
        })



        GridItem() {
          Column() {
            Image($r('app.media.banner2')).width("100%")
              .height(180).padding(10)
              .borderRadius(15)
            Text("本地视频2").fontSize(14).fontColor(Color.White)
          }.width('100%')
          .height('100%')

        }.height(200)
        .padding(10)
        .borderRadius(15)
        .onClick(() => {
          router.pushUrl({
            url: "pages/videoPlayer",
            params: {
              isLocal:true,
              num:-1,
              title:"本地视频2",
              preUrl:"app.media.banner1",
              videoUrl:"1.mp4",
              videoList:this.videoList
            }
          })
        })


        ForEach(this.videoList,(item:videoListInterFace)=>{

          GridItem() {
            Column() {
              Image(item.picUrl).width("100%")
                .height(180).padding(10)
                .borderRadius(15)
              Text(item.title).fontSize(14).fontColor(Color.White)
            }.width('100%')
            .height('100%')

          }.height(200)
          .padding(10)
          .borderRadius(15)
          .onClick(() => {
            router.pushUrl({
              url: "pages/videoPlayer",
              params: {
                isLocal:false,
                num:this.videoList.indexOf(item),
                title:item.title,
                preUrl:item.picUrl,
                videoUrl:"https://sns-video-bd.xhscdn.com/stream/110/258/01e602cadc11542d010370038e7ae8b418_258.mp4",
                videoList:this.videoList


              }
            })

          })

        })



      }
      .width("100%")
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .rowsGap(5)
      .columnsGap(10)
      .borderRadius(15)

    }.width('100%').height('100%').backgroundColor(0x1e2736)
  }
}

palyer:

import router from '@ohos.router';
import http from '@ohos.net.http';
import { audio } from '@kit.AudioKit';
import { BusinessError } from '@kit.BasicServicesKit';

interface videoListInterFaceALL {
  id: string,
  ctime: string,
  title: string,
  description: string,
  source: string,
  picUrl: string
  videoUrl: string
  isLocal: boolean,
  num: number,
  videoList:videoListInterFace[]
}


interface videoListInterFace {
  id: string,
  ctime: string,
  title: string,
  description: string,
  source: string,
  picUrl: string
  videoUrl: string
  isLocal: boolean,
  num: number

}






@Entry
@Component
struct VideoPlayer {
  @State message: string = 'Hello World';
  @State cruRate:PlaybackSpeed=PlaybackSpeed.Speed_Forward_1_00_X
  controller:VideoController=new VideoController()
  player:audio.AudioManager=audio.getAudioManager()

  //倍率、选集

  @Builder subMenu(){
    Menu(){
      MenuItem({content:"1.0X"}).contentFontColor(Color.White)
        .onClick(()=>{
          this.cruRate=PlaybackSpeed.Speed_Forward_1_00_X
        })

      MenuItem({content:"1.25X"}).contentFontColor(Color.White)
        .onClick(()=>{
          this.cruRate=PlaybackSpeed.Speed_Forward_1_25_X
        })


      MenuItem({content:"1.75X"}).contentFontColor(Color.White)
        .onClick(()=>{
          this.cruRate=PlaybackSpeed.Speed_Forward_1_75_X
        })

      MenuItem({content:"2.0X"}).contentFontColor(Color.White)
        .onClick(()=>{
          this.cruRate=PlaybackSpeed.Speed_Forward_2_00_X
        })


    }.width(80)
    .backgroundColor(Color.Black)


  }





  @Builder subMenu1(){
    Menu(){

      ForEach(this.videoList,(item:videoListInterFace)=>{

        MenuItem({content:item.title}).contentFontColor(Color.White)
          .onClick(()=>{
            router.pushUrl({
              url:"pages/videoPlayer",
              params:{
                num:this.videoList.indexOf(item),
                title:item.title,
                picUrl:item.picUrl,
                videoUrl:"https://sns-video-bd.xhscdn.com/stream/110/258/01e602cadc11542d010370038e7ae8b418_258.mp4",
                isLocal:false,
                videoList:this.videoList
              }

            })
          })


      })




    }.width(180)
    .backgroundColor(Color.Black)


  }






  private   Nextnum:number=0
  private   newxtvideo:videoListInterFace={
    id: "",
    ctime: "string",
    title: "string",
    description: "string",
    source: "string",
    picUrl: "string",
    videoUrl: "string",
    isLocal: false,
    num: 0

  }


  aboutToAppear(): void {

    let title:string=(router.getParams() as videoListInterFaceALL).title;
     this.Nextnum=(router.getParams() as videoListInterFaceALL).num+1;
    let isLocal:boolean=(router.getParams() as videoListInterFaceALL).isLocal;
    let pre:string=(router.getParams() as videoListInterFaceALL).title;
    let picUrl:string=(router.getParams() as videoListInterFaceALL).picUrl;
    let videoUrl:string=(router.getParams() as videoListInterFaceALL).videoUrl;
    let videoList:videoListInterFace[]=(router.getParams() as videoListInterFaceALL).videoList;

    this.newxtvideo=videoList[this.Nextnum]

    // 初始化音量
    this.player.getVolume(audio.AudioVolumeType.MEDIA, (err: BusinessError, value: number) => {
      if (err) {
        console.error(`Failed to obtain the volume. ${err}`);
        return;
      }
      this.volume = value;
      console.info('Callback invoked to indicate that the volume is obtained:'+value);
    });


  }

@State volume:number=50
@State num:number=(router.getParams() as videoListInterFaceALL).num
@State ctime:string=(router.getParams() as videoListInterFaceALL).ctime
@State title:string=(router.getParams() as videoListInterFaceALL).title
@State picUrl:string=(router.getParams() as videoListInterFaceALL).picUrl
@State videoUrl:string=(router.getParams() as videoListInterFaceALL).videoUrl
@State isLocal:boolean=(router.getParams() as videoListInterFaceALL).isLocal
@State videoList:videoListInterFace[]=(router.getParams() as videoListInterFaceALL).videoList



  build() {
    Column(){
      //顶部
      Row(){
        Image($r("app.media.ic_back")).width(22).height(22).margin({left:10})
          .onClick(()=>{
            router.back()
          })

         Text(this.title).fontSize(22).fontColor(Color.White).layoutWeight(1).textAlign(TextAlign.Center)

      }.height(30)
      .width('100%')
      .margin({top:40})



      //播放器

      if(this.isLocal){
        Video({
          src:$rawfile(this.videoUrl),
          previewUri:$r(this.picUrl),
          controller:this.controller,
          currentProgressRate:this.cruRate
        }).autoPlay(true)
          .loop(true)
          .controls(true)
          .width("100%")
          .height(600)

      }else {
    Video({
      src:this.videoUrl,
      previewUri:this.picUrl,
      controller:this.controller,
      currentProgressRate:this.cruRate
    }).autoPlay(true)
      .loop(true)
      .controls(true)
      .width("100%")
      .height(600)
      }

//控制器
     Row(){

Row(){
        // 下一个

  Image($r("app.media.forward_end_fill")).width(22).height(22).margin({left:20})
    .onClick(()=>{
      router.pushUrl({
        url:"pages/videoPlayer",
        params:{
          num:this.Nextnum,
          title:this.newxtvideo.title,
          picUrl:this.newxtvideo.picUrl,
          videoUrl:"https://sns-video-bd.xhscdn.com/stream/110/258/01e602cadc11542d010370038e7ae8b418_258.mp4",
          isLocal:false,
          videoList:this.videoList
        }

      })

    })


  //声音

  Image($r("app.media.sy")).width(22).height(22).margin({left:20})


  Slider({
    value:50,
    min:0,
    max:100,
    step:1,
    direction:Axis.Horizontal

  }).width(100)
    .showTips(true)
    .onChange((newvalue)=>{
      this.player.setVolume(audio.AudioVolumeType.MEDIA,newvalue);
      return;
    }
    )
          }.layoutWeight(1)

          Row(){

          }.layoutWeight(5)

         //右侧

       Row(){

       Text("倍数").fontSize(18).fontColor(Color.White).bindMenu(this.subMenu())

         Text("选集").fontSize(18).fontColor(Color.White).bindMenu(this.subMenu1()).margin({left:20})

       }.layoutWeight(1)

     }




    }.width('100%')
    .height('100%')
    .backgroundColor(0x1e2736)
  }
}

DENGLU

import promptAction from '@ohos.promptAction';

@Extend(TextInput) function customStyle(){
  .backgroundColor('#fff')
  .border({width:{bottom:0.5},color:'#e4e4e4'})
  .borderRadius(1) //让圆角不明显
  .placeholderColor('#c3c3c5')
  .caretColor('#fa711d') //input获取焦点样式
}

@Entry
@Component
struct LoginPage {
  @State isAgree:boolean = false; //是否勾选，默认没有勾选
  @State username:string = '';//用户名
  @State password:string = '';//密码
  //登录按钮逻辑处理
  login(){
    //是否勾选同意
    if(!this.isAgree){
      promptAction.showToast({
        message: '请阅读条款',
        duration: 5000
      })
      return; //结束
    }
    //输入的校验
    let reg = /^[a-zA-Z0-9_]{3,10}$/
    if(reg.test(this.username) == false){
      promptAction.showToast({
        message: '用户名输入格式错误',
        duration: 5000
      })
      return; //结束
    }
    let reg_pwd = /^[a-zA-Z0-9_]{6,}$/
    if(reg_pwd.test(this.password) == false){
      promptAction.showToast({
        message: '密码输入格式错误',
        duration: 5000
      })
      return; //结束
    }

    promptAction.showToast({
      message: '登录成功'+ this.username + '--->'+ this.password,
      duration: 5000
    })

  }
  build() {
    Column(){  //整个登录页面
      //表单部分
      Column({space:15}){
        TextInput({placeholder:'请输入账号'})
          .customStyle()
          .onChange((value)=>{
            this.username = value
          })
        TextInput({placeholder:'请输入密码'})
          .customStyle()
          .type(InputType.Password)
          .onChange((value)=>{
            this.password = value
          })
        Row(){
          Checkbox()
            .selectedColor('red')//选中的时候都额颜色
            .width(14)
            .aspectRatio(1)
            .shape(CheckBoxShape.ROUNDED_SQUARE) //也可以是0或是1
            .onChange((value)=>{
              // console.log('login',value)
              this.isAgree = value //修改状态值
            })
          
        }
        .width('100%')

        Button({type:ButtonType.Normal,stateEffect:false}){
          Text('立即登录')
            .fontColor('#fff')
          }
          .width('100%')
          .backgroundColor('transparent') //透明
          //.stateEffect(false)  //设置button默认点击，false默认不可以点击
          .borderRadius(4)
          .height(44)
          .linearGradient({  //颜色渐变
            direction:GradientDirection.Right,
            colors: [['#FC9B1C',0],['#FA711D',1]]
          })
        .onClick(() => {
          // console.log('login','登录成功')
          this.login();//登录逻辑处理
        })

      }
    }
    .width('100%')
    .height('100%')
    .padding(15)
  }
}

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值