做了一个视频播放器，但是一直在loading

做了一个视频播放器，但是一直在loading

第一次打开的时候loading一直在转，必须要刷新一次才能播放，不知道为什么，代码也如下

images文件夹里的6个图片

http://img1.sycdn.imooc.com//climg/5a55f7fd0001a58400480048.jpgsilent.png

http://img1.sycdn.imooc.com//climg/5a55f7fd0001891300480048.jpgpause.png

http://img1.sycdn.imooc.com//climg/5a55f7fd00010e6e01240124.jpgloading.gif

http://img1.sycdn.imooc.com//climg/5a55f7fd0001edf600480048.jpgsound.png

http://img1.sycdn.imooc.com//climg/5a55f7fe0001aeb000480048.jpgstart.png

http://img1.sycdn.imooc.com//climg/5a55f87600015ad400480048.jpgstop.png


index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <script src="jquery-3.2.1.js" ></script>
    <title>我的播放器</title>
</head>
<body>
<div class="container">
    <video preload="metadata">
        <source src="http://www.1ting.com/mv/video/vhd/816135.flv" type="video/mp4"/>
 抱歉，您的浏览器不支持video标签！
    </video>
    <div class="header">VisaW的自主播放器</div>
    <div class="footer">
        <div class="top">
            <div class="time-line">
                <div class="time-bar"></div>
            </div>
            <div class="time-font">
                <span class="cur-time">00:00</span><span>/</span><span class="duration">00:00</span>
            </div>
        </div>
        <div class="clear-box"></div>
        <div class="bottom">
            <div class="icon-play start"></div>
            <div class="icon-stop"></div>
            <div class="speed">
                <span class="selected">X1</span>
                <span>X2</span>
                <span>X3</span>
            </div>
            <div class="vol-field">
                <div class="icon-vol sound"></div>
                <div class="vol-line">
                    <div class="vol-bar"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="loading"></div>
</div>
<!--<div>-->
    <!--<input name="changeSkin" type="color"/>-->
<!--</div>-->
<script src="index.js"></script>
</body>
</html>


style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
 
body {
    font-family: "宋体","Avenir", arial, sans-serif;
    font-size: 10px;
    color: #28b294;
}
 
.clear-box {
    clear: both;
}
 
.container {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 600px;
    height: 340px;
    overflow: hidden;
}
 
video {
    width: 600px;
    height: 340px;
    z-index: 1;
}
 
.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px;
    line-height: 44px;
    z-index: 2;
    background-color: #b8f1cc;
    text-align: center;
}
 
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 44px;
    z-index: 2;
    background-color: #b8f1cc;
}
 
.footer .top {
    padding: 0 5px;
}
 
.footer .top .time-line {
    float: left;
    width: 85%;
    margin:2px 0;
    height: 10px;
    border-radius: 5px;
    background-color: #ccc;
    overflow: hidden;
    cursor: pointer;
}
 
.footer .top .time-line .time-bar {
    width: 0;
    height: 100%;
    border-radius: 5px;
    background-color: #28b294;
    cursor: pointer;
}
 
.footer .top .time-font {
    float: right;
    width: 15%;
    height: 20px;
    text-align: right;
}
 
.footer .top .time-font span {
    display: inline-block;
    height: 20px;
    line-height: 20px;
}
 
.footer .bottom {
    padding: 0 5px;
}
 
.footer .bottom .icon-play {
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
}
 
.footer .bottom .start {
    background: url(images/start.png) no-repeat;
    background-size: 100%;
}
 
.footer .bottom .play {
    background: url(images/pause.png) no-repeat;
    background-size: 100%;
}
 
.footer .bottom .icon-stop {
    float: left;
    width: 20px;
    height: 20px;
    background: url(images/stop.png) no-repeat;
    background-size: 100%;
    margin-right: 10px;
    cursor: pointer;
}
 
.footer .bottom .speed {
    float: left;
    margin: 2px 0;
}
 
.footer .bottom .speed span {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
}
 
.footer .bottom .speed span.selected {
    background-color: #28b294;
    color: #b8f1cc;
}
 
.footer .bottom .vol-field {
    float: right;
    width: 130px;
}
 
.footer .bottom .vol-field .icon-vol {
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
}
 
.footer .bottom .vol-field .sound {
    background: url(images/sound.png) no-repeat;
    background-size: 100%;
}
 
.footer .bottom .vol-field .silent {
    background: url(images/silent.png) no-repeat;
    background-size: 100%;
}
 
.footer .bottom .vol-field .vol-line {
    float: right;
    width: 100px;
    margin:5px 0;
    height: 10px;
    border-radius: 5px;
    background-color: #ccc;
    overflow: hidden;
    cursor: pointer;
}
 
.footer .bottom .vol-field .vol-line .vol-bar {
    width: 50%;
    height: 100%;
    border-radius: 5px;
    background-color: #28b294;
}
 
.loading {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: url(images/loading.gif) center center;
    background-size: 100%;
    z-index: 99;
VisaW 2018-01-10
源自：HTML5音视频   5-1 总结
131
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

7回答
一路电光带火花 2018-01-11 11:16:40

本地服务器可以就OK了呀，没有国外服务器的飘过。。。。。

0
收起回答
好帮手慕糖 2018-01-11 09:47:19

你好，本地测试是可以正常运行的，没有gif图片一直加载的情况，建议：可以本地测试下。

祝学习愉快~

0
收起回答
  • 提问者 VisaW #1
    本地测试是可以正常运行，但是放到国外的服务器上就会一直loading，不知道是不是因为服务器的原因还是几个关于loading的事件写得不对
    2018-01-11 10:38:05
提问者 VisaW 2018-01-10 19:32:17

接上条index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
   /**
     * 当视频的元数据被加载时
     * 绑定一系列事件
     * 同时进行一系列初始化操作
     */
    video[0].onloadedmetadata = function() {
 
        loading.css('display', 'none');
 
        var videoDuration = video[0].duration;      //定义视频的总时长
        var speed = video[0].playbackRate;
        var videoVolume = video[0].volume;          //定义视频的音量
        var isVolDrag = false;                      //音量条是否处于拖拽状态
        var isTimeDrag = false;                     //时间条是否处于拖拽状态
 
 
        video[0].volume = 0.5;                      //初始化操作，音量为0.5
        duration.html(timeFormat(videoDuration));   //设置视频时长区域
 
        /**
         * 当播放按钮被点击时
         * 如果当前视频处于播放状态，则视频暂停播放，播放按钮图标变成start的样式
         * 如果当前视频处于未播放状态，则视频开始播放，播放按钮图标变成play的样式
         */
        playBtn.click(function() {
            if (video[0].paused || video[0].ended) {
                video[0].play();
                changePlayBtn(true);
            } else {
                video[0].pause();
                changePlayBtn(false);
            }
        });
 
        /**
         * 当停止按钮被点击时
         * 暂停当前视频播放
         * 改变播放按钮的样式为start
         * 将当前视频的播放时间设置为总时长
         */
        stopBtn.click(function() {
            video[0].pause();
            changePlayBtn(false);
            video[0].currentTime = 0;
            changeTimeBar("0");
        });
 
        /**
         * 为每一个速率绑定点击事件
         * 当前速率被点击时，移除其他速率的selected的样式，并为当前速率绑定selected的样式
         * 设置当前播放速率为当前点击的速率
         */
        $.each(rateBtns, function(index, obj) {
            $(obj).click(function() {
                rateBtns.removeClass('selected');
                $(obj).addClass('selected');
                video[0].playbackRate = (index + 1);
                console.log(speed);
            })
        });
 
        /**
         * 当声音/静音按钮被点击时
         * 判断当前视频音量是否大于0
         * 如果当前音量 > 0，将视频音量设置为0，同时按钮图标变为silent，volBar的宽度变为0
         * 如果当前音量 === 0，将视频音量设置为上一次的音量，同时按钮图标变为sound，volBar的宽度变为上一次的宽度
         */
        volBtn.click(function() {
            var curVolume = video[0].volume;
            if (curVolume > 0) {
                videoVolume = curVolume;
                video[0].volume = 0;
                changeVolBtn(false);
                changeVolBar("0");
            } else {
                video[0].volume = videoVolume;
                changeVolBtn(true);
                changeVolBar(videoVolume * 100 + "%");
            }
        });
 
        /**
         * 当鼠标在音量条上按下时，音量条进入拖拽状态
         */
        volBar.mousedown(function(e) {
            e.stopPropagation();
            isVolDrag = true;
        });
 
        /**
         * 当鼠标在视频移动时，判断音量条/时间条是否处于拖拽状态
         * 如果处于拖拽状态，则调用拖动音量条/时间条的方法；
         */
        container.mousemove(function(e) {
            e.stopPropagation();
            if (isVolDrag) {
                dragVolBar(e);
            }
            if (isTimeDrag) {
                dragTimeBar(e);
            }
        });
 
        /**
         * 鼠标松开的时候，音量条/时间条离开拖拽状态
         */
        container.mouseup(function(e) {
            e.stopPropagation();
            isVolDrag = false;
            isTimeDrag = false;
        });
 
        /**
         * 当volLine被点击时候
         */
        volLine.click(function(e) {
            dragVolBar(e);
        });
 
        /**
         * 当视频当前播放时长发生变化时，修改时间条的样式和当前时长的文字区域
         */
        video[0].ontimeupdate = function() {
            var videoCurTime = video[0].currentTime;
            console.log(videoCurTime);
            curTime.html(timeFormat(videoCurTime));
            changeTimeBar(videoCurTime / videoDuration * 100 + "%");
        };
 
        /**
         * 当鼠标在时间条上按下时，时间条进入拖拽状态
         */
        timeBar.mousedown(function(e) {
            e.stopPropagation();
            isTimeDrag = true;
        });
 
        /**
         * 当timeLine被点击时候
         */
        timeLine.click(function(e) {
            dragTimeBar(e);
        });
 
        /**
         * 播放结束时改变播放按钮的样式
         */
        video[0].onended = function() {
            changePlayBtn(false);
        };
 
        /**
         * 视频等待数据时显示loading图片
         */
        video[0].onwaiting = function() {
            loading.css('display', 'block');
        };
 
        /**
         * 视频加载结束时不显示loading图片
         */
        video[0].oncanplay = function() {
            loading.css('display', 'none');
        }
    };
 
    /**
     * 鼠标进入视频区域时，显示头部与底部
     */
    container.mouseenter(function() {
        showControl(true)
    });
 
    /**
     * 鼠标离开视频区域时，隐藏头部与底部
     */
    container.mouseleave(function() {
        showControl(false)
    });
});


0
收起回答
提问者 VisaW 2018-01-10 19:31:24

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
$(function() {
    var container = $('.container');                //定义整个视频加控制区域
    var video = $('video');                         //定义视频区域
    var header = container.find('.header');         //定义控制区域头部
    var footer = container.find('.footer');         //定义控制区域底部
    var playBtn = container.find('.icon-play');     //定义播放按钮
    var stopBtn = container.find('.icon-stop');     //定义停止按钮
    var rateBtns = container.find('.speed span');   //定义播放速率的按钮组
    var volBtn = container.find('.icon-vol');       //定义声音/静音按钮
    var volBar = container.find('.vol-bar');        //定义音量条
    var timeBar = container.find('.time-bar');      //定义时间条
    var duration = container.find('.duration');     //定义视频总时长文字区域
    var curTime = container.find('.cur-time');      //定义视频当前播放时长文字区域
    var volLine = container.find('.vol-line');      //定义音量条背景条
    var timeLine = container.find('.time-line');    //定义时间条背景
 
    var changeSkin = $('[name=changeSkin]');      //一键换肤
    var loading = $('.loading');
 
    /**
     * isShow === true，显示头部与底部
     * isShow === false，隐藏头部与底部
     * @param isShow {boolean}
     */
    function showControl(isShow) {
        if (isShow) {
            header.fadeIn(500);
            footer.fadeIn(500);
        } else {
            header.fadeOut(500);
            footer.fadeOut(500);
        }
    }
 
    /**
     * 修改播放按钮的样式
     * isPlay === true, 播放按钮为play样式
     * isPlay === false, 播放按钮为start样式
     * @param isPlay {boolean}
     */
    function changePlayBtn(isPlay) {
        if (isPlay) {
            playBtn.removeClass('start').addClass('play');
        } else {
            playBtn.removeClass('play').addClass('start');
        }
    }
 
    /**
     * 修改声音/静音按钮的样式
     * isSound === true， 按钮为sound样式
     * isSound === false, 按钮为silent样式
     * @param isSound {boolean}
     */
    function changeVolBtn(isSound) {
        if (isSound) {
            volBtn.removeClass('silent').addClass('sound');
        } else {
            volBtn.removeClass('sound').addClass('silent');
        }
    }
 
    /**
     * 修改音量条的样式
     * @param percent {String}
     */
    function changeVolBar(percent) {
        volBar.css('width', percent);
    }
 
    /**
     * 修改时间条的样式
     * @param percent {String}
     */
    function changeTimeBar(percent) {
        timeBar.css('width', percent);
    }
 
    /**
     * 格式化时间
     * @param times {Number} 时长，以s为单位
     * @returns {string}     00：00：00
     */
    function timeFormat(times) {
        var hours = "";
        var minutes = Math.floor(times / 60);
        if (minutes < 10) {
            minutes = "0" + minutes;
        } else if(minutes > 59) {
            hours = Math.floor(minutes / 60);
            minutes = minutes % 60;
            if (minutes < 10) {
                minutes = "0" + minutes;
            }
        }
        var seconds = Math.round(times % 60);
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        if (hours) {
            return hours + ":" + minutes + ":" + seconds;
        } else {
            return minutes + ":" + seconds;
        }
 
    }
 
    /**
     * 拖动音量条的方法
     * @param e {Object} 事件event
     */
    function dragVolBar(e) {
        var mouseX = e.pageX;
        var volBarX = volBar.offset().left;
        var volLineWidth = volLine.width();
        var volBarWidth = mouseX - volBarX;
        if (volBarWidth < 0) {
            volBarWidth = 0;
        } else if (volBarWidth > volLineWidth) {
            volBarWidth = volLineWidth;
        }
        changeVolBar(volBarWidth / volLineWidth * 100 + "%");
        video[0].volume = volBarWidth / volLineWidth;
        changeVolBtn(video[0].volume > 0);
    }
 
    /**
     * 拖动时间条的方法
     * @param e {Object} 事件event
     */
    function dragTimeBar(e) {
        var mouseX = e.pageX;
        var timeBarX = timeBar.offset().left;
        var timeLineWidth = timeLine.width();
        var timeBarWidth = mouseX - timeBarX;
        if (timeBarWidth < 0) {
            timeBarWidth = 0;
        } else if (timeBarWidth > timeLineWidth) {
            timeBarWidth = timeLineWidth;
        }
        changeTimeBar(timeBarWidth / timeLineWidth * 100 + "%");
        video[0].currentTime = timeBarWidth / timeLineWidth * video[0].duration;
    }
0
收起回答
好帮手慕糖 2018-01-10 19:17:00

你好，不知道在本地测试是否正常？请粘贴全部的代码，只有部分代码无法进行测试。

祝学习愉快~

0
收起回答
提问者 VisaW 2018-01-10 19:00:26
1
2
3
4
5
6
7
8
9
video[0].onloadedmetadata = function() {    
    loading.css('display', 'none'); 
    video[0].onwaiting = function() {    
        loading.css('display', 'block');    
    };    
    video[0].oncanplay = function() {    
        loading.css('display', 'none');    
    }    
}

loading就是那个一直加载的gif图片

关于控制这个图片的显示就是以上的代码，很奇怪我打开github展示页面时，第一次打开loading图片会一直显示在上面，必须要刷新一次网页才能正常，不知道为什么。

0
收起回答
好帮手慕糖 2018-01-10 18:32:17

你好，我们这里不能访问外部链接，如果有问题请之间粘贴代码，便于大家测试与解决问题。

祝学习愉快~

0
收起回答
  • 提问者 VisaW #1
    video[0].onloadedmetadata = function() { loading.css('display', 'none'); video[0].onwaiting = function() { loading.css('display', 'block'); }; video[0].oncanplay = function() { loading.css('display', 'none'); } } loading就是那个一直加载的gif图片 关于控制这个图片的显示就是以上的代码，很奇怪我打开github展示页面时，第一次打开loading图片会一直显示在上面，必须要刷新一次网页才能正常，不知道为什么。
    2018-01-10 19:00:10
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

关于视频播放器倍数问题？
15 0 4
chrom浏览器 video，audio的属性autoplay是不是没用了？
0 0 3
应该怎么把播放列表的名字添加到播放器中
0 0 6
老师，请帮我看一下上传视频的代码？可以显示上传成功，但是播放会显示无效源。
2 0 17
主播放列表问题
32 1 3

登录后可查看更多问答，登录/注册

响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！

了解课程

本课精华内容

问答 作业

图片高度不一样的问题

45 24

请问老师原理是什么

70 16

请问老师到底是什么机制

44 12

我的js为什么绑定不上啊

0 11

请问这个怎么解释

44 11

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师
插入代码