#星光计划1.0# 播放器流转迁移,带评论功能 原创 精华

#星光计划1.0# 播放器流转迁移,带评论功能 

此demo主要功能
1轮播功能  2 评论功能   ,3流转功能  4频播放功能

第一部分 模板创建
(一步步教)

鸿蒙的模板很多 ,官方文档里有一句话 模板即指南, 那么我用的就是  news share ability这个模板 

去文件里面新建项目,找到模板 news share ability 这个模板, 找不到就就去 模板市场里下载  (IDE更新到最新版本) 

构建成功之后 先看目录结构

这个里面的entry和entrytv  本模板是双entry + 一个har包的结构，

两个entry分别对应于手机和大屏两端，而har包作为公有库提供新闻读取、多端信息发送与接受的能力

我们只开发 entry模块 也就是手机一侧 entrytv 先放一边, 按shift+f10 开始运行 

你会得到一个报错  意思就是设备型号错误,  这个问题很简单 看下图

在这个路径下找到 config.json的 deviceType去配置tv 或者phone  ,

然后再更改配置选项    那个18888上面的 entryTV 看到没有

 这个东西是机型型号的配置文件 ,鸿蒙支持多套设备 ,这里也可以调整多套设备的对应的文件

把entryTV改成entry  ,这个时候你就会发现模板运行成功了  

然后再就下面一部 非常重要,流转流转,大家都要有同一样的代码包 才能运行同样的功能,那么我们需要把 这个程序跑到 18889 上  更改方式如下图

然后点击小的红色方块 , 然后再按shift+f10  这样就运行成功

运行成功!!

• 
   主要核心技术是流转迁移 先贴点文档,方便你们查阅,其实官方文档写的很详细  

文档地址

流转的核心代码

import prompt from '@system.prompt'

export default {
  data: {
    continueAbilityData: {
      remoteData1: 'self define continue data for distribute',
      remoteData2: {
        item1: 0,
        item2: true,
        item3: 'inner string'
      },
      remoteData3: [1, 2, 3]
    }
  },

  // shareData的数据会在onSaveData触发时与saveData一起传送到迁移目标FA，并绑定到其shareData数据段上
  // shareData的数据可以直接使用this访问。eg:this.remoteShareData1
  shareData: {
    remoteShareData1: 'share data for distribute',
    remoteShareData2: {
      item1: 0,
      item2: false,
      item3: 'inner string'
    },
    remoteShareData3: [4, 5, 6]
  },
  tryContinueAbility: async function() {
    // 应用进行迁移
    let result = await FeatureAbility.continueAbility();
    console.info("result:" + JSON.stringify(result));
  },
  onStartContinuation() {
    // 判断当前的状态是不是适合迁移
    console.info("onStartContinuation");
    return true;
  },
  onCompleteContinuation(code) {
    // 迁移操作完成，code返回结果
    console.info("CompleteContinuation: code = " + code);
  },
  onSaveData(saveData) {
    // 数据保存到savedData中进行迁移。
    var data = this.continueAbilityData;
    Object.assign(saveData, data)
  }
}

第二部分   代码正文

html结构 随便看看就好 

<div class="container">
    <div class="video-block">

        <swiper class="swiper" id="swiper" index="0" indicator="true" loop="true" digital="false">
            <div class="swiperContent">

            <!--        //不能用变量来代替地址-->
                <video id="video"
                       class="video"
                       src="../../common/video/daea3058dce77ddbb7a6faafe8b3ed4e.mp4"
                       autoplay="{{ autoplay }}"
                       poster="{{ posterrl }}"
                       controls="{{ controlShow }}"
                       loop="{{ loop }}"
                       starttime="{{ startTime }}}"
                       speed="{{ speed }}"
                       onprepared="prepared"
                       onstart="start"
                       onpause="pause"
                       onfinish="finish"
                       onseeked="seeked"
                       ontimeupdate="timeupdate"
                       onfullscreenchange="fullscreenchange"
                       onlongpress="longPressFullscreenchange"
                       on:click="hideControls">
                </video>
            </div>
            <div class="swiperContent">
                <video id="video"
                       class="video"
                       src="../../common/video/daea3058dce77ddbb7a6faafe8b3ed4e.mp4"
                       autoplay="{{ autoplay }}"
                       poster="{{ posterrl }}"
                       controls="{{ controlShow }}"
                       loop="{{ loop }}"
                       starttime="{{ startTime }}}"
                       speed="{{ speed }}"
                       onprepared="prepared"
                       onstart="start"
                       onpause="pause"
                       onfinish="finish"
                       onseeked="seeked"
                       ontimeupdate="timeupdate"
                       onfullscreenchange="fullscreenchange"
                       onlongpress="longPressFullscreenchange"
                       on:click="hideControls">
                </video>
            </div>
            <div class="swiperContent">
                <video id="video"
                       class="video"
                       src="../../common/video/daea3058dce77ddbb7a6faafe8b3ed4e.mp4"
                       autoplay="{{ autoplay }}"
                       poster="{{ posterrl }}"
                       controls="{{ controlShow }}"
                       loop="{{ loop }}"
                       starttime="{{ startTime }}}"
                       speed="{{ speed }}"
                       onprepared="prepared"
                       onstart="start"
                       onpause="pause"
                       onfinish="finish"
                       onseeked="seeked"
                       ontimeupdate="timeupdate"
                       onfullscreenchange="fullscreenchange"
                       onlongpress="longPressFullscreenchange"
                       on:click="hideControls">
                </video>
            </div>
        </swiper>

    </div>


    <dialog id="confirmDialog" class="dialog-main">
        <div class="dialog-div">
            <div class="inner-txt">
                <text class="txt">视频播放完成，是否重新播放？</text>
            </div>
            <div class="inner-btn">
                <button type="capsule" value="取消" onclick="cancel" class="btn-txt"></button>
                <button type="capsule" value="确定" onclick="confirm" class="btn-txt"></button>
            </div>
        </div>
    </dialog>


    <div class="box">
    <!--    显示留言-->
        <list scrollpage="true" divider-height="1" scrollbar="on" class="todo-wraper">
            <list-item for="{{ msgData }}" class="todo-item">
                <div class="border1">
                    <text class="todo-title">{{ $item.msg }}</text>

                <!--                    <text class="todo-time">{{ date }}</text>-->
                </div>

            </list-item>
        </list>
        <button   class="share" onclick="transfer({{ 1 }},{{ 1 }})">
            开始流转
        </button>
    <!--    发送留言区-->
    </div>
    <div class="comment">
        <input value="{{ inputValue }}" onchange="updateValue()"></input>
        <button class="button" type="capsule" text-color="ff007dff" onclick='addMsg'>留言</button>
    </div>
</div>

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #FAFAFA;
}

.video-block {
    margin-bottom: 4px;
    width: 99%;
}


.box{
    position: relative;
    height: 60%;
}
.comment{
 position: absolute;
    right: 0%;
    bottom: 0%;
}
.button{
    position: absolute;
    right: 0%;
}



.video-stack {
    width: 100%;
    height: 184.5px;
    align-content: center;
    justify-content: center;
}

import router from '@system.router';
import device from '@system.device';
import prompt from '@system.prompt';
const ACTION_REQUEST_NEWS_LIST = 1001;
export default {
    data: {
        news: new Array(),
        newsList: new Array(),
        videoPlayingStatus: new Array(),
        newsUrl: '',
        currentIndex: 0,
        currentPlaying: -1,
        deviceId: '',
        videoPlayFlag: true,
        containsVideo: false,
        autoplay: false, // 是否自动播放
        videoId: 'video', // 播放器id
        url: '../../common/video/daea3058dce77ddbb7a6faafe8b3ed4e.mp4', // 视频地址
        posterUrl: '/common/images/first.jpg', // 视频预览的海报路径
        controlShow: true, // 是否显示控制栏
        loop: true, // 是否循环播放
        startTime: 0, // 播放开始时间
        speed: 1.0, // 播放速度
        isfullscreenchange: false,// 是否全屏
        inputValue: "",
        leaveMsg: "",
        commentText: false,
        title: "",
        inputVal: "", //留言框内的数据
        msgData: [], //所有留言数据
        msgData1: "",
        date: "",
    },
    async onInit() {
        await this.requestNewsList();
    },
    async onNewRequest() {
        if (this.newsUrl != '') {
            await router.push({
                uri: 'pages/detail/detail',
                params: {
                    newsUrl: this.newsUrl,
                    currentIndex: this.currentIndex
                },
            });
        }
        this.newsUrl = '';
    },
    makeAction(bundleName, abilityName, code, data) {
        const action = {};
        action.bundleName = bundleName;
        action.abilityName = abilityName;
        action.messageCode = code;
        action.abilityType = 1;
        action.data = data;
        return action;
    },
    showDetail(url) {
        router.push({
            uri: 'pages/detail/detail',
            params: {
                newsUrl: url,
                currentIndex: this.currentIndex,
            },
        });
    },
    async onShow() {
        if (this.newsUrl && this.containsVideo == false) {
            this.showDetail(this.newsUrl);
            this.newsUrl = '';
        }
    },
   
    async transfer(idx, item) {
        var forwardCompatible = false;
        device.getInfo({
            success: function (data) {
                if (data.apiVersion >= 5) {
                    forwardCompatible = false;
                } else {
                    forwardCompatible = true;
                }
            },
            fail: function (data, code) {
                console.error("index.js get Device API version failed");
            }
        });
        if (this.videoPlayingStatus[idx] == true) {
            this.$element("video" + idx).pause();
            this.videoPlayingStatus.splice(idx, 1, false);
        }
        const target = {};
        target.bundleName = 'com.example.myapplication';
        target.abilityName = 'DeviceSelectAbility';
        target.deviceType = 1;
        target.data = {
            title: item.title,
            transferName: 'HUAWEI News',
            transferIcon: item.title_image,
        };
        this.deviceId = '';
        var res = await FeatureAbility.startAbilityForResult(target);
        if (!!forwardCompatible == true) {
            res = JSON.parse(res);
        }
        if (res.code == 0) {
            var dataRemote = JSON.parse(res.data);
            var data;
            if (!!forwardCompatible == true) {
                data = dataRemote;
            } else {
                data = dataRemote.result;
            }
            const targetDeviceId = data.deviceId;
            const targetDeviceType = data.deviceType;
            const deviceDebugMode = data.deviceDebugMode;
            if (!!targetDeviceId && (targetDeviceId != this.deviceId)) {
                this.deviceId = targetDeviceId;
                const target = {};
                target.bundleName = 'com.example.myapplication';
                target.abilityName = 'MainAbility';
                target.deviceId = this.deviceId;
                target.data = {
                    newsUrl: item.url,
                    onTransfer: true,
                    containsVideo: this.newsList[idx].contains_video,
                };
                if (targetDeviceType == 'SMART_TV' || deviceDebugMode == true) {
                    await FeatureAbility.startAbility(target);
                } else {
                    prompt.showToast({
                        message: 'Video News can only be transferred to TV',
                        duration: 2000,
                    });
                }

            }
        }
    },
    videoOnPause() {
        if (this.videoPlayFlag == false) {
            this.videoPlayingStatus.splice(this.currentPlaying, 1, false);
            this.videoPlayFlag = true;
        }

    },
    //    =============
    prepared(e) {
        this.showPrompt('视频时长：' + e.duration + '秒');
    },
    // 视频开始播放
    start() {
        this.showPrompt('视频开始播放');
    },
    // 视频暂停播放
    pause() {
        this.showPrompt('视频暂停播放');
    },
    // 视频播放完成
    finish() {
        this.$element('confirmDialog').show();
    },
    // 拖动进度条调用
    seeked(e) {
        this.showPrompt('设置播放进度：' + e.currenttime + '秒');
    },
    // 播放进度变化调用
    timeupdate(e) {

    },
    // 自带组件进入全屏和退出全屏
    fullscreenchange(e) {
        if (e.fullscreen === 1) {
            this.isfullscreenchange = true;
        } else {
            this.isfullscreenchange = false;
        }
    },
    // 长按屏幕视频进入和退出全屏调用
    longPressFullscreenchange() {
        if (this.isfullscreenchange) { // 全屏
            this.$element('video').exitFullscreen();
            this.isfullscreenchange = false;
        } else { // 非全屏
            this.$element('video').requestFullscreen({ screenOrientation: 'default' });
            this.isfullscreenchange = true;
        }
    },

    // dialog确定
    confirm() {
        this.$element('video').start();
        this.$element('confirmDialog').close();
    },
    // dialog取消
    cancel() {
        this.$element('confirmDialog').close();
    },
    // 弹框
    showPrompt(msg) {
        prompt.showToast({
            message: msg,
            duration: 1000
        });
    },
    // 点击视频
    hideControls() {
        this.controlShow = !this.controlShow;
    },
    //===============================
    //获取当前输入信息
    updateValue(e) {
        this.inputValue = e.text;
    },
   
    addMsg() {
        var now = new Date();
        var year = now.getFullYear(); //得到年份
        var month = now.getMonth(); //得到月份
        var date = now.getDate(); //得到日期
        month = month + 1;
        if (month < 10) month = "0" + month;
        if (date < 10) date = "0" + date;
        var time = year + "-" + month + "-" + date; //（格式化"yyyy-MM-dd"）
        this.date = time
        //把当前留言添加到leaveMsg里面
        this.leaveMsg = this.inputValue;

        var list = this.msgData //获取所有留言
        list.push({ //向list中添加当前添加的留言
            msg: this.inputValue
        })
        ///将所有留言更新到msgData中。
        this.msgData = list;
        //清空留输入框的内容
        this.inputValue = "";


        var list1 = this.data.msgData1;
        for (var i = 0; i < list.length; i++) {
            list1.push({
                msg: list[i].msg
            });
        }
        //        把新添加的数据添加到要存入stroage的数组中
        this.setStorage({
            key: 'msgData1',
            data: list1,
        })
        //     把数据存至stroage
        var that = this;
        this.getStorage({
            key: 'msgData1',
            success: function (res) {
                that.setData({
                    msgData1: res.data
                });
            },
        })

    },
};

本文正在参与创作者激励-星光计划1.0