首页用jQuery写一个视频播放器

用jQuery写一个视频播放器

时间: 2023-12-29 11:17:36 浏览: 69

好的，以下是使用jQuery编写的简单视频播放器示例： HTML代码： ```html <div class="video-player"> <video id="my-video" class="video-js" controls preload="auto" width="640" height="360" poster="poster.jpg" data-setup="{}"> <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p> </video> </div> ``` 在页面的`head`标签中添加以下代码引入jQuery和Video.js库： ```html <head> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" /> <script src="https://vjs.zencdn.net/7.14.3/video.js"></script> </head> ``` JavaScript代码： ```javascript $(document).ready(function() { // 获取video元素 var player = videojs('my-video'); // 自动播放 player.autoplay(true); // 设置音量 player.volume(0.5); // 监听播放事件 player.on('play', function() { console.log('视频开始播放'); }); // 监听暂停事件 player.on('pause', function() { console.log('视频暂停播放'); }); // 监听结束事件 player.on('ended', function() { console.log('视频播放结束'); }); }); ``` 这个示例中使用了Video.js库来创建和控制视频播放器，可以通过调用Video.js提供的方法来实现更多的功能，具体可参考官方文档。

阅读全文