Das Folgende ist der Video.js-Webplayer, den ich für Sie zusammengestellt habe. Interessierte Studenten können ihn ausprobieren.
Der erste Schritt
<link href="video-js.css" rel="stylesheet" type="text/css"> <!-- video.js must be in the <head> for older IEs to work. --> <script src="video.js"></script>
Der zweite Schritt
<script> videojs.options.flash.swf = "video-js.swf"; </script>
Der dritte Schritt
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="480" data-setup="{}">
<source src="wangdeshun.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>4. Schritt 4
<script>
var player = videojs("example_video_1");
// 检测播放时间
player.on('timeupdate', function () {
console.log('当前播放时间：' = player.currentTime());
}
});
// 开始或恢复播放
player.on('play', function() {
console.log('开始/恢复播放');
});
// 暂停播放
player.on('pause', function() {
console.log('暂停播放');
});
/在 <head> 中声明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
setTimeout(function(){
player.pause();
},10000);
</script>Auf diese Weise können Sie Online-Videos abspielen. Ist das nicht sehr praktisch?
Überprüfen Sie, ob das Video abgespielt wurde
player.on('timeupdate', function () {
// 如果 currentTime() === duration()，则视频已播放完毕
if (player.duration() != 0 && player.currentTime() === player.duration()) {
// 播放结束
}
});Wenn Sie es für die mobile Nutzung benötigen
在 <head> 中声明 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Das Obige ist der Video.js-Webplayer, den ich hoffentlich für alle zusammengestellt habe Es wird in Zukunft für alle hilfreich sein.
Verwandte Artikel:
So geht's Verwenden Sie vue.js, um die Preisformatierung zu implementieren (Code angehängt)
Das obige ist der detaillierte Inhalt vonErstellen Sie einen Webplayer mit Video.js (grafisches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
