找到
1
篇与
html播放器
相关的结果
-
Video.js：打造功能丰富、跨平台的自定义HTML5视频播放器 项目名字 Video.js在线示例 源码好不好，一看就知道 如果想使用video.js，请确保浏览器可以运行JavaScript，并且支持 HTML5 video 使用 方法一 在 jsdelivr 和 bootcdn 上都可以找到video.js的cdn，我们以jsdelivr为例。 需要引入的js和css如下:https://unpkg.com/video.js@7.10.2/dist/video-js.min.css https://unpkg.com/video.js@7.10.2/dist/video.min.js引入video.js 最简单的使用video.js的方式是创建一个video标签，并且包含data-setup属性。data-setup属性可以包含video.js的各种配置。如果什么都不需要，可以传一个空对象”{}”<video id="my-player" class="video-js" controls preload="auto" width="640" height="264" 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"> 如果想使用video.js，请确保浏览器可以运行JavaScript，并且支持 <a href="https://videojs.com/html5-video-support/" target="_blank" >HTML5 video</a> </p> </video>页面加载完成后，video.js会找到该video标签，然后启动一个播放器。 完整代码如下：<head> <link href="https://unpkg.com/video.js@7.10.2/dist/video-js.min.css" rel="stylesheet" /> <!-- 如果要支持IE8，请使用v7之前的video.js，并且引入下面这个js链接。--> <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> --> </head> <body> <video id="my-player" class="video-js" controls preload="auto" width="640" height="264" 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"> 如果想使用video.js，请确保浏览器可以运行JavaScript，并且支持 <a href="https://videojs.com/html5-video-support/" target="_blank" >HTML5 video</a> </p> </video> <script src="https://unpkg.com/video.js@7.10.2/dist/video.min.js"></script> </body>js启动 如果不想自动启动播放器，可以移除video标签上的data-setup属性，然后使用js代码启动。let player = videojs('my-player');调用videojs函数的时候，也可以传options配置对象和callback回调函数作为参数。let options = {}; let player = videojs('my-player', options, function onPlayerReady() { videojs.log('播放器准备好了!'); // In this context, `this` is the player that was created by Video.js. this.play(); this.on('ended', function() { videojs.log('播放结束!'); }); });获取Video.js 获取Video.js 下载地址：https://file.fulicode.cn/down.php/854370b8fa22a27d81c6be1a79a28f98.zip 提取码： 结语 祝大家安装成功2024-11-16 14:14:03 星期六
