为了账号安全,请及时绑定邮箱和手机立即绑定

旋转木马视频播放出错

/ 猿问

旋转木马视频播放出错

在圣诞情缘的课程上的旋转木马播放视频的时候,本来的视频来源没有了,播放不了,换成自己的视频也播放不了,有哪位大佬知道为什么吗?代码截图如下:

//img3.sycdn.imooc.com/59e845240001cc8410710571.jpg

//img3.sycdn.imooc.com/59e8452500017f4d04540519.jpg

PS:我用谷歌浏览器播放的,界面效果如图,播放不了视频

//img2.sycdn.imooc.com/59e845b30001abb506700491.jpg

查看完整描述

2 回答

已采纳
?
牛奶老哥哥

第二十八行单词拼错了,是

carousel.playVideo()

补充- - - - - -- 

好吧原来这个方法是你自己命名的,我看了下那个小的不能再小的图,$video[0]并不是一个jquery对象吧,他能调用play()方法吗?你的控制台没有什么报错信息吗?

查看完整回答
1 反对 2017-10-19
  • 慕粉1933024339
    慕粉1933024339
    控制台没有报错信息,我把2个js都贴一下,您看一下呢
  • 牛奶老哥哥
    牛奶老哥哥
    你在课程的网络编辑器里面能实现效果吗,把他的视频源换掉后
?
慕粉1933024339

//================================================

//格式化字符串

var slice = Array.prototype.slice


function toArray(a, i, j) {

    return slice.call(a, i || 0, j || a.length);

}

/**

 * 返回true,如果传递的值不是未定义。

 * @param {Mixed}

 * @return {Boolean}

 */

function isDefined(v) {

    return typeof v !== 'undefined';

}


/**

 * 拷贝对象,跳过已存在的

 * @param  {[type]} o [接受方对象]

 * @param  {[type]} c [源对象]

 * @return {[type]}   [description]

 */

function applyIf(o, c) {

    if (o) {

        for (var p in c) {

            //跳过已存在

            if (!isDefined(o[p])) {

                o[p] = c[p];

            }

        }

    }

    return o;

}

/**

 * @class String

 * 格式化字符串

 */

applyIf(String, {

    format: function (format) {

        var args = toArray(arguments, 1);

        return format.replace(/\{(\d+)\}/g, function (m, i) {

            return args[i];

        });

    }

});



/**

 * 3d旋转木马

 * @param  {[type]} argument [description]

 * @return {[type]}          [description]

 */

function Carousel(carousel, options) {

    //图片

    var imgUrls = options.imgUrls;

    //场景元素

    var $carousel = carousel;

    //容器元素

    var $spinner = carousel.find("#spinner");

    var angle = 0;

    //图片数

    var numpics = imgUrls.length;

    //角度

    var rotate = 360 / numpics;

    var start = 0;

    var current = 1;

    //子元素

    var $contentElements;


    //图片数量

    this.numpics = numpics;


    /**

     * 创建结构

     * @param  {[type]} imgUrl [description]

     * @return {[type]}        [description]

     */

    function createStr(imgUrl) {

        var str = '<figure style="transform:rotateY({0}deg) translateZ({1}) scaleY(.9);position:absolute;">' + '<img src="{2}" style="width:100%;height:100%;">' + '</figure>';


        return String.format(str,

            start,

            "2.5rem",

            imgUrl

        )

    }


    /**

     * 初始化样式

     * @return {[type]} [description]

     */

    function initStyle() {

        //场景元素

        $carousel.css({

            // "transform": "scale(0.3)",

            "-webkit-perspective": "500",

            "-moz-perspective": "500px",

            "position": "absolute",

            "left": "6.8rem",

            "top": "4.5rem"

        });

        //容器

        $spinner.css({

            "width": "4rem",

            "transform-style": "preserve-3d",

            "transition": "1s"

        })

    }


    /**

     * 绘制页面节点

     * @return {[type]} [description]

     */

    function render() {

        //创建内容

        var contentStr = '';

        $.each(imgUrls, function (index, url) {

            contentStr += createStr(url);

            start = start + rotate;

        })

        $contentElements = $(contentStr);

        $spinner.append($contentElements)

    }


    //样式

    initStyle();

    //绘制节点

    render();



    //旋转次数,游标,当前页码

    var currIndex;


    /**

     * 运行旋转

     * @param  {[type]}   count    [description]

     * @param  {Function} callback [description]

     * @return {[type]}            [description]

     */

    this.run = function (count, callback) {

        currIndex = count;

        //360

        //480

        //600

        angle = (count - 1) * rotate + 360

        $spinner

            .css("-moz-transform", "rotateY(-" + angle + "deg)")

            .css("transform", "rotateY(-" + angle + "deg)")

            .one("transitionend webkitTransitionend", function () {

                callback()

            })

    }


    /**

     * 视频播放

     * @param  {[type]} index   [description]

     * @param  {[type]} element [description]

     * @return {[type]}         [description]

     */

    this.playVideo = function () {

        //索引从0开始

        var index = currIndex

        var element = element || $contentElements.eq(index)

        /**

         * vide标签

         * @type {[type]}

         */

        var $video = $('<video preload="auto"  class="bounceIn" style="width:50%;height:50%;position:absolute;left:30%;top:35%;"></video>');

        $video.css({

            "position": "absolute",

            "z-index": "999"

        })

        //地址

        var src = options.videoUrls[index];

        $video.attr('src', src);

        //播放

        $video.on("loadeddata", function () {

            $video[0].play()

        })

        //停止

        $video.on("ended", function () {

            $video[0].pause()

            //退出效果

            $video.addClass("bounceOut").one("animationend webkitAnimationEnd", function () {

                $video.remove();

            })

        })

        $carousel.after($video)

    }



}

//img1.sycdn.imooc.com/59e85dea0001658208050538.jpg

查看完整回答
反对 2017-10-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信