调用优酷云API 在自己的网站嵌入优酷视频

最新推荐文章于 2021-06-03 13:26:48 发布

崔雨田

最新推荐文章于 2021-06-03 13:26:48 发布

阅读量1.3k

点赞数

分类专栏： java 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41291945/article/details/106328424

版权

java 专栏收录该内容

83 篇文章 7 订阅

订阅专栏

需求：
1、自己的网站嵌入优酷视频
2、实时显示播放时间

工作流程
1、申请优酷云
2、创建应用
3、获取播放器代码
4、运行

1、申请优酷云

链接

https://cloud.youku.com/

在这里插入图片描述

2、创建应用

中间会有审核(需要填写认证信息)
在这里插入图片描述

在这里插入图片描述

3、获取播放器代码

在这里插入图片描述
选择对应的功能，便可生成代码。

4、运行

新建web项目

html 代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="youkuplayer" style="width:580px;height:326px"></div>

<div>
    <h4>当前播放进度：</h4>
    <span id="CntTime"></span>
</div>


</body>

<script type="text/javascript" src="https://player.youku.com/jsapi"></script>

<script type="text/javascript">
    var player = new YKU.Player('youkuplayer', {
        styleid: '0',
        client_id: '802e5ab9bcb588d8',

        vid: 'XNDY4MjAyNTI0NA==',

        newPlayer: true,

        autoplay: true,
        events: {
            onPlayStart: function () {
                console.log("ok");
            }
        }
    });

    window.addEventListener('message', function (e) {
        var data = e.data;
        switch (data.msg) {
            case "onPlayerStart": {
                onPlayerStart();
                break;
            }
            case "onPlayEnd": {
                onPlayEnd();
                break;
            }
            case 'onTimeUpdate': {
                document.getElementById("CntTime").innerHTML = data.time;
                console.info(data.time);
                break;
            }
            case "state": {
                var state = data.stateParam;
                console.info(state);
                break;
            }
        }
    }, false);
</script>
</html>

效果

在这里插入图片描述

完工！！！！

崔雨田

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
调用优酷云API 在自己的网站嵌入优酷视频

需求：1、自己的网站嵌入优酷视频2、实时显示播放时间工作流程1、申请优酷云2、创建应用3、获取播放器代码4、运行1、申请优酷云链接https://cloud.youku.com/2、创建应用中间会有审核(需要填写认证信息)3、获取播放器代码选择对应的功能，便可生成代码。4、运行新建web项目html 代码如下<!DOCTYPE html><html lang="en"><head> <meta chars
复制链接

扫一扫

专栏目录