curder · September 13, 2017 07:59
diff --git a/video.html b/video.html
 <!doctype html>
 <html lang="zh_CN">
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Video Js</title>
    <link href="https://cdn.bootcss.com/video.js/6.2.7/video-js.css" rel="stylesheet">
 </head>
 <body>
 <video id="my-video"
       class="video-js vjs-big-play-centered"
       controls
       poster="http://vjs.zencdn.net/v/oceans.png"
       data-setup="{}">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
 </video>
 <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/video.js/6.2.7/video.js"></script>
 <script>
    // 定时开启视频
    /* videojs('my-video').ready(function () {
        setTimeout(() => {
            this.play();
         }, 3000);
     });*/

    // 设置视频的快进度
    /*videojs('my-video').ready(function () {
         var speed = prompt('你需要多快?');
         this.playbackRate(speed);
         this.play();
     });*/

    // 视频结束时，向服务器发送请求
    /*videojs('my-video').on('ended', function () {
        alert('视频播放完毕');
     });*/

    // 视频结束时，发送ajax请求
    videojs('my-video').on('ended', function () {
        $.ajax({
            type: 'POST',
            url: '/api/completions',
            data : {},
        });
    });

    // 视频暂停时,当前视频还剩多少没看
    /*videojs('my-video').on('pause', function () {
        alert('当前视频剩余' + this.remainingTime());
     });*/

    // 视频进度选择（HTML5原生支持）
    /*videojs('my-video', {
        playbackRates : [.5,1,2,3,4],
     });*/
 </script>

 <script src="//cdn.sc.gl/videojs-hotkeys/0.2/videojs.hotkeys.min.js"></script>
 <script>
    // 一些相关插件 https://github.com/videojs/video.js/wiki/Plugins
    // 比如：鼠标控制上下箭头控制音量、左右箭控制视频进度可以使用`videojs-hotkeys`
    videojs('my-video').ready(function () {
        this.hotkeys({
            seekStep: 10, // 快进或者快退10秒
            enableNumbers: false,
        });
    });
 </script>
 </body>
 </html>
	<!doctype html>
	<html lang="zh_CN">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Video Js</title>
	<link href="https://cdn.bootcss.com/video.js/6.2.7/video-js.css" rel="stylesheet">
	</head>
	<body>
	<video id="my-video"
	class="video-js vjs-big-play-centered"
	controls
	poster="http://vjs.zencdn.net/v/oceans.png"
	data-setup="{}">
	<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
	<p class="vjs-no-js">
	To view this video please enable JavaScript, and consider upgrading to a web browser that
	<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
	</p>
	</video>
	<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/video.js/6.2.7/video.js"></script>
	<script>
	// 定时开启视频
	/* videojs('my-video').ready(function () {
	setTimeout(() => {
	this.play();
	}, 3000);
	});*/

	// 设置视频的快进度
	/*videojs('my-video').ready(function () {
	var speed = prompt('你需要多快?');
	this.playbackRate(speed);
	this.play();
	});*/

	// 视频结束时，向服务器发送请求
	/*videojs('my-video').on('ended', function () {
	alert('视频播放完毕');
	});*/

	// 视频结束时，发送ajax请求
	videojs('my-video').on('ended', function () {
	$.ajax({
	type: 'POST',
	url: '/api/completions',
	data : {},
	});
	});

	// 视频暂停时,当前视频还剩多少没看
	/*videojs('my-video').on('pause', function () {
	alert('当前视频剩余' + this.remainingTime());
	});*/

	// 视频进度选择（HTML5原生支持）
	/*videojs('my-video', {
	playbackRates : [.5,1,2,3,4],
	});*/
	</script>

	<script src="//cdn.sc.gl/videojs-hotkeys/0.2/videojs.hotkeys.min.js"></script>
	<script>
	// 一些相关插件 https://github.com/videojs/video.js/wiki/Plugins
	// 比如：鼠标控制上下箭头控制音量、左右箭控制视频进度可以使用`videojs-hotkeys`
	videojs('my-video').ready(function () {
	this.hotkeys({
	seekStep: 10, // 快进或者快退10秒
	enableNumbers: false,
	});
	});
	</script>
	</body>
	</html>