video.js事件监听判断播放进度，执⾏动画------------恢复内容开始------------
1<!DOCTYPE html>
2<html>
3
4<head>
5<title>video.html</title>
6
7<meta name="keywords" content="keyword1,keyword2,keyword3">
8<meta name="description" content="this is my page">
9<meta name="content-type" content="text/html; charset=UTF-8">
10<link rel="stylesheet" href="../src/css/video-js.min.css">
11<!-- <link rel="stylesheet" type="text/css" href="./styles.css"> -->
12<script src="../src/js/jquery.min.js"></script>
13<script src="../src/js/video.min.js"></script>
14</head>
15
16<body>
17<video id="video-active" class="video-js vjs-default-skin" controls preload="none" poster="./image/banner.jpg">
18<source src="../src/video/banner-video.mp4" type="video/mp4">
19</video>
20<div id="current">当前时长：0:00</div>
21<div id="duration">总时长：0:00</div>
22<div id="pro"></div>
23<script type="text/javascript">
24// function play(id, autoplay) {
25var myPlayer = videojs("#video-active", {
26            controls: true, //是否显⽰控制条
27            poster: 'xxx', // 视频封⾯图地址
28            muted: true, // 是否静⾳
29            preload: 'auto', //预加载
html动画效果30            autoplay: true, //是否⾃动播放
31            fluid: true, // ⾃适应宽⾼
32            loop: true, //是否循环播放
33            inactivityTimeout: false,
34            language: 'zh-CN', // 设置语⾔
35            controlBar: { // 设置控制条组件
36/* 设置控制条⾥⾯组件的相关属性及显⽰与否
37                'currentTimeDisplay':true,
38                'timeDivider':true,
39                'durationDisplay':true,
40                'remainingTimeDisplay':false,
41                volumePanel: {
42                  inline: false,
43                }
44*/
45/* 使⽤children的形式可以控制每⼀个控件的位置，以及显⽰与否 */
46                children: [{
47                        name: 'playToggle'
48                    }, // 播放按钮
49                    {
50                        name: 'currentTimeDisplay'
51                    }, // 当前已播放时间
52                    {
53                        name: 'progressControl'
54                    }, // 播放进度条
55                    {
56                        name: 'durationDisplay'
57                    }, // 总时间
58                    { // 倍数播放
59                        name: 'playbackRateMenuButton',
60                        'playbackRates': [0.5, 1, 1.5, 2, 2.5]
61                    }, {
62                        name: 'volumePanel', // ⾳量控制
63                        inline: false, // 不使⽤⽔平⽅式
64                    }, {
65                        name: 'FullscreenToggle'
66                    } // 全屏
67                ]
68            },
69            sources: [ // 视频源
70                {
71                    src: '../src/video/banner-video.mp4',
72                    type: 'video/mp4',
73                    poster: '../image/banner.jpg'
74                }
75            ]
76        }, function() {
77
78            console.log('视频可以播放了', this);
79        });
80// 绑定事件
81        ("timeupdate", function(event) {
82
83var currentTime = parseInt(this.currentTime()); //当前时间
84var duration = this.duration(); //视频时常
85var percent = (currentTime / duration * 100).toFixed(0) + "%";
86            console.log(percent);
87            $("#current").text(this.currentTime());
88            $("#duration").text(duration);
89if (currentTime == duration) {
90                $("#pro").html("已完成");
91            }
92if (currentTime == 6) {
93                alert("判断播放时间执⾏动画");
94// 执⾏dom改变页⾯内容
95            } else {
96// 执⾏dom改变页⾯内容
97            }
98        });
99// var data = {
100//  src: 'xxx.mp4',
101//  type: 'video/mp4'
102// };
103// var player = videojs('myVideo', {...});
104// player.pause();
105// player.src(data);
106// player.load(data);
107// // 动态切换poster
108// player.posterImage.setSrc('xxx.jpg');
109// player.play();
110
111// 销毁videojs
112//player.dispose();
113</script>
114</body>
115
116</html>
------------恢复内容结束------------

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。