video.js播放视频

最新推荐文章于 2024-08-08 08:27:10 发布
原创 最新推荐文章于 2024-08-08 08:27:10 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何使用HTML5和JavaScript创建一个自定义的视频播放器。通过简单的代码示例展示了如何实现视频的自动播放、控制条等功能，并提供了一个完整的HTML文件结构。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>


<head>
<meta charset="UTF-8">
<title></title>
<script src="http://vjs.zencdn.net/5-unsafe/video.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://vjs.zencdn.net/5-unsafe/video-js.css"/>
</head>


<body>
<video autoplay="autoplay" class='video-js vjs-default-skin' webkit-playsinline controls='controls' style="height: 500px;" height='100%' id='play_video' poster="" time="1027" seq="1" lesson_count="" data-setup='{"example_option":true,"customControlsOnMobile": true}' preload='none' width="655">
<!-- 如果浏览器不兼容HTML5则使用flash播放 -->
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
</video>
</body>


</html>
videojs 视频播放
04-07
videojs 视频播放支持所有浏览器的播放。
videoJs播放视频和视频流
09-27
最近研究通过videoJs播放本地视频和网络视频流，现将学习成果总结供大家分享。 操作步骤如下： 1、下载解压文件，进入对应的文件打开HTML文件直接运行即可。 2、文件夹内容说明：前两个文件夹是播放本地不同格式视频的实例，后两个文件建分别是播放M3U8格式和RTMP格式视频流的实例。 3、运行播放rtmp的实例时，请根据注意事项进行操作。
vue video.js的使用
晴天有何特别
10-29 973
vue video.js的使用 flash将被淘汰，html播放器将成为主流
videojs 播放视频
热门推荐
在职可交流前端开发，包括：web端、uniapp等，欢迎指教。
08-17 1万+
背景：动态更换播放的视频源时，需要先用dispose()销毁，再重新创建，dispose方法会连同dom一同删除，故需要创建dom （如果直接创建video元素，注意生成的object不能在video标签下面，否则页面不报错但不能播放，最好创建一个div ,将其innerHTML设为’
Video.js 播放m3u8视频
01-22
总的来说，Video.js结合`videojs5.hlsjs.js`组件提供了一种跨平台、跨浏览器播放M3U8视频的解决方案。通过理解和配置这些组件，开发者可以轻松地在网页上实现高质量的流媒体体验。同时，了解M3U8和MP4的差异以及如何...
video.js播放hls视频示例.rar
12-21
总结来说，video.js结合videojs-contrib-hls插件，为我们提供了一种在现代浏览器中播放HLS视频的有效方案。通过合理的配置和自定义，我们可以创建出高性能、易用的视频播放器，满足各种Web应用场景的需求。在实际...
vue + typescript + video.js实现 流媒体播放 视频监控功能
12-09
在构建一个基于Vue.js、TypeScript以及video.js的流媒体播放视频监控系统时，我们需要考虑以下几个关键知识点： 1. **视频流媒体技术**：视频监控通常涉及到实时数据传输，流媒体技术如RTMP (Real-Time Messaging ...
video.js 实现视频只能后退不能快进的思路详解
10-18
总结来说，通过结合使用video.js的事件监听和状态管理，我们可以实现一个定制化的视频播放体验，只允许用户后退而不能快进。这样的功能对于某些特定场景，如在线教育或直播回放，可能会非常有用。希望这个思路详解对...
video.js播放rtmp视频demo
09-14
var player = videojs('myPlayer', options); player.ready(function() { player.play(); }); ``` 这里的`src`属性指定了RTMP流的URL，`type`属性则告诉video.js这是RTMP流。 为了使这个demo更进一步，开发者还...
JS视频播放
07-19
JS视频播放插件源码，导入jsModern插件，写一个video样式即可用，代码简单易读
javascript 视频播放
12-06
一个简单易懂的js视频播放demo页面.
video.js视频播放器
08-22
video.js视频播放器
web 视频播放器 js
03-08
autoscroll(true,false):当播放列表过长的时候，默认会自动显示滚动条。当该值设置为’true’的时候，会自动根据鼠标滚动播放列表。 displaywidth(number of pixes):设置显示区域的宽度，当设置的比较小的时候，播放列表会显示在显示区域的右侧而不是底部。 kenburns* (true,false): 用以实现在运动的时候实现kb效果（Ken Burns effect），注意，当图比较大，而且网速比较快的时候，建议打开，否则关闭。建议设置transition为"slowfade"来配合。 largecontrols (true,false): 设置该值为true用来放大控制区域的按钮。建议为视力不好的用户打开 logo* (url): 设置一个图片用来作为右上角的水印，支持所有图片格式，支持通明图层的png效果最佳。 overstretch* (true,false,fit,none): 设置图片/影片在显示区域的缩放。"true"等比例拉伸用来符合显示区域。"false"仅拉伸合显示区域。"fit"全屏显示。"none"显示原始大小。JW Media Player等默认为"fit",JW Image Rotator默认为"false" showdigits (true,false,total): 设置为"false"隐藏播放时间等信息用来节省控制区域的空间。设置为"total"用来显示全部时间。 showdownload (true,false):设置该值用来在控制区域显示下载按钮。链接到link所设置的地址。 showeq (true,false): 用来显示一个假的音频波动效果。当播放mp3的时候打设置该值可以得到很好的效果 showicons* (true,false): 用来显示或者隐藏显示区域中间的图片，JW Media Player等默认为true。JW Image Rotator默认为false； showvolume (true,false): 用来设置是否显示音量控制按钮 thumbsinplaylist (true,false): 设置列表中是否显示预览图 播放参数 autostart (true,false,muted): 设置为ture，页面加载完后会自动播放。设置为muted，会在静音模式下自动播放，并且显示区域中间有静音图标。bufferlength (number): 设置flv的缓存时间。默认为3秒 repeat* (true,false,list): 默认为flase，从当前播放位置播放到列表尾部后停止。设置为list会播放列表中所有的项目，设置为true会循环播放。 rotatetime* (number): 设置图片的显示时间。JW Media Player等默认为10秒,JW Image Rotator默认为5秒 shuffle* (true,false): 设置为false顺序播放，设置为true无序播 smoothing (true,false): 设置为false关闭视频平滑处理，推荐设置true用以得到更好效果。但对于大屏幕或者配置低的机器设置false是有好处的 start* (second): 在使用RTMP 或 HTTP 流媒体的时候（非常规的flv/mp3)，使用该变量准确的定位开始位置。该参数设置在XSPE格式的列表中以便准且的设置文件的章节。 volume* (number): 设置音量，默认为80. 互动参数 audio* (url):用这个参数来添加一个mp3文件作为单独的音频，可以作为图片的背景音乐解说等。 bwfile (url):用以带宽检测的文件的地址，可以放一个图片，或者rtmp流媒体。可以在右键菜单中查看到贷款数值。 bwstreams (comma-separated list of bitrates): 和bwfile配合使用，根据带宽值来选择不同的文件。如：你要播放video.flv并且设置该项的值为100,250,500,1000,当播放器发现带宽为349kbps的时候，将会播放video_250.flv。所以他有一套有效的命名设置，他将会自动切换，哪怕是在采用播放列表的情况下。 callback (url):设置这个参数为服务端程序（php/asp)地址用来回传数据。在每个项播放和停止的时候会发送数据到服务器，以便在服务器端保存播放统计。 captions (url): 设置该值用以载入一个文本格式的文本作为字幕。播放器至支持SMIL格式和DVD的SRT格式的字幕。如果你的flv文件内置字体你可以设置该值为"captionate".如果你有多频道字幕，可以设置这个值为"captionate0", "captionate3"等。可以在列表中设置每一个项的值。 enablejs* (true,false): 设置为true打开对javascript的支持。仅支持在线使用。javascript可以控制播放，加载媒体，获得当前播放项的详尽信息。 fsbuttonlink (url):如果用户的flashplayer版本高于（9.0.28）播放器会自动的显示一个全屏按钮。通过设置该值，你可以链接到另外的页面用以全屏显示。服务端程可以设定将要播放的文件。 id (string): 播放器的唯一标识。将会被回传到服务器端。 javascriptid* (string):如果你的页面上有多个播放器，你可以设置这个参数给每个播放器不同的id，这样就可以方便的用javascript来控制。他将回传到getUpdate（）事件中。 link (url): 通过这个参数用来设置一个可现在的版本，或者强制用户通过该地址下载当前项。可以在播放列表中为每一项设置该值。 linkfromdisplay* (true,false):设置显示区域被点击时要访问的页面。默认点击显示区域时会进行播放/暂停操作。 linktarget* (frame): 设置链接目标，"_self"在当前页打开。"_blank"在新页面中打开。 streamscript (url):设置这个参数为了兼容‘伪流媒体’FLV文件。 type (mp3,flv,rtmp,jpg,png,gif,swf,rbs,3gp,mp4,m4v): 播放器会根据文件名的最后三个字符来判断类型。在你使用服务器端语言进行重定向时，这种方法将不会再有效。所以你可以设置这个参数来告诉播放器文件类型。你也可以在播放列表中对每一项进行设置。如果播放器找不到文件类型将会被识别为播放列表。 useaudio (true,false): 设置为false用来改变为静音状态。 usecaptions (true,false):设置为false隐藏字幕. usefullscreen (true,false):如果你不希望用flashplayer9的全屏模式。可以设置"fsbuttonlink"参数用来替换全屏按钮的事件。 usekeys (true,false): 设置为"false"用来取消键盘操作(SPACE,UP,DOWN,LEFT,RIGHT) 注意：你必须对?=&进行字符转移。? → %3F, = → %3D, & → %26. 你的"file" 变量为getplaylist.php?id=123的时候必须设置为 getplaylist.php%3Fid%3D123.
Video.js 播放器使用教程
最新发布
gitblog_00643的博客
08-08 1215
Video.js 播放器使用教程 videojs-player@videojs player component for @vuejs(3) and React.项目地址:https://gitcode.com/gh_mirrors/vi/videojs-player 项目介绍 Video.js 是一个为 HTML5 世界从头构建的网络视频播放器。它支持 HTML5 视频和媒体源扩展，以及其他播...
使用Video.js进行视视频的播放
战场战魁
08-02 788
【代码】使用Video.js进行视视频的播放。
js控制视频播放
qq_43654065的博客
08-04 3043
1. HTML页面嵌入视频的两种方式 iframe video 2. js控制视频的播放 首先，iframe中的视频没有找到js可以控制的方法，接下来重点讲一下video控制视频播放的方法。 3. video控制视频播放 参考：https://blog.csdn.net/arvin0/article/details/81665264 ...
在网站中使用VideoJs视频播放器播放视频
zgphacker2010的专栏
09-01 8225
之前使用videojs用来网页中播放视频，现在做一下总结 （这里把插件下载及演示地址、使用方法及demo放出来） 视频播放插件Video.js 插件下载地址：http://www.jq22.com/jquery-info404 演示播放视频地址：http://www.jq22.com/yanshi404（直接从浏览器打开观看效果） Video.js 是一个通用的在网页上嵌入视频播放器...
vue使用video.js播放视频
12-28
在Vue项目中使用video.js播放视频，可以按照以下步骤进行： 1. 首先，安装video.js和video.js的CSS样式文件。可以使用npm或者yarn进行安装： ```shell npm install video.js npm install video.js/dist/video-js.css ``` 2. 在Vue项目的入口文件（例如main.js）中，引入video.js和video.js的CSS样式文件，并将video.js注册到Vue的原型上： ```javascript import Vue from 'vue' import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video ``` 3. 在需要使用video.js播放视频的组件中，可以通过`this.$video`来访问video.js的功能。例如，在一个视频播放组件中，可以使用以下代码来初始化和播放视频： ```javascript export default { mounted() { // 获取video标签 const videoElement = this.$refs.video // 使用video.js初始化视频 const player = this.$video(videoElement) // 设置视频源 player.src('path/to/video.mp4') // 播放视频 player.play() } } ``` 请注意，上述代码中的`$refs.video`是一个ref属性，用于获取video标签的DOM元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值