video.js

How to make videojs marker slidable or movable

由 谁说胖子不能爱 提交于 2020-03-18 11:56:26
问题 I want to move my markers whenever it is slided along with the seek. I expect my markers to be exactly slidable as jqueryui-slider Question: I want my markers (both) to be as slidable as jqueryui-range slider as shown below the video in the following example: var player = videojs('example_video_1'); function markplayer(){ var inTimeOutTimeList = [6.333,27.667]; for(var i = 0; i < inTimeOutTimeList.length; i++){ player.markers.add([{ time: inTimeOutTimeList[i], text: inTimeOutTimeList[i] }]);

WEB直播技术入门及在 Vue 中应用 video.js

由 僤鯓⒐⒋嵵緔 提交于 2020-03-01 17:39:36
简介 视频直播服务目前支持三种直播协议，分别是RTMP、HLS、FLV 以下内容来自阿里云帮助中心 RTMP 实时消息传输协议，由Adobe公司研发，但当前还没有收入国际标准（wikipedia） 。协议比较全能，既可以用来推送又可以用来直播，其核心理念是将大块的视频帧和音频帧“剁碎”，然后以小数据包的形式在互联网上进行传输，且支持加密，因此隐私性相对比较理想，但拆包组包的过程比较复杂，所以在海量并发时容易出现一些不可预期的稳定性问题。 HLS 协议： 基于HTTP协议的流直播（wikipedia） 。苹果推出的解决方案，将视频分成 5-10 秒的视频小分片，然后用 m3u8 索引表进行管理。由于客户端下载到的视频都是 5-10 秒的完整数据，故视频的流畅性很好，但也同样引入了很大的延迟（HLS 的一般延迟在 10-30s 左右）。相比于 FLV， HLS 在iPhone 和大部分 Android 手机浏览器上的支持非常给力，所以常用于 QQ 和微信朋友圈的 URL 分享。 HTTP-FLV 协议由 Adobe 公司主推，格式极其简单，只是在大块的视频帧和音视频头部加入一些标记头信息，由于这种极致的简洁，在延迟表现和大规模并发方面都很成熟。唯一的不足就是在手机浏览器上的支持非常有限，但是用作手机端 APP 直播协议却异常合适。 下面看一下三种技术的对比： 在 Vue 中应用

Videojs in Chrome on Android doesn't show poster

由 廉价感情. 提交于 2020-02-05 02:36:41
问题 I have a video on this page: https://job.id/2044/telemarketing-executive-kota-bekasi On all devices & browsers it works fine except Google Chrome on Android. The poster image does not show. Any suggestion how to get poster image to show? Videojs viewed using Chrome on Android Videojs viewed using other browser on Android The video emdedded as: <video id="video-1" class="vjs-tech" preload="auto" data-setup="{fluid: true}" poster="https://d1gajg4ezrqrup.cloudfront.net/live/video/advertiser/1/6

Appending paramaters to each m3u8 and ts file while playing live stream

由 限于喜欢 提交于 2020-01-24 19:23:12
问题 I am using videojs in live streaming environment and using nginx secure URLs to protect the stream. See here for the details - https://www.nginx.com/blog/securing-urls-secure-link-module-nginx-plus/ The algorithm works fine and the player is able to detect when the live.m3u8 file becomes available. However, when playing the stream, I just get a spinning wheel. On the JS console, I see that the sub-playlist e.g. live_109.m3u8 URL does not have the required md5 hash and expiry timestamp and

video.js - find the start time of a seek during playback

由 旧城冷巷雨未停 提交于 2020-01-24 04:36:05
问题 I am using video.js (http://www.videojs.com/) to build a video approval system and need to log user actions in the player. I can do this easily enough with play, pause, end etc. but have hit a problem when trying to log seeks. I want to be able to log the start and end times of any seeks within the plaback, so we know if the user has not actually watched a section of the video. The player seems to offer events to support this, but I am struggling to get correct timings from it. When the user

Videojs seeing grey boxes in android mobile

由 偶尔善良 提交于 2020-01-23 17:03:44
问题 I have the latest version of videojs. Only in android tablets and mobile, I'm seeing grey boxes where the play and fullscreen buttons should be. These appear properly in other video sites like youtube on the same device. I assume it's the devices own inbuilt controls. Please can anyone tell me how to replace these grey boxes for the correct icons? 回答1: The icons in the latest version of VideoJS are now contained within an icon font, which is loaded in using an @font-face rule - this used to

Issue with the flash fallback of VideoJs with Firefox

由 纵然是瞬间 提交于 2020-01-14 14:13:10
问题 I have try to add videoJs to my site to play MP4 files, all works perfectly in Chrome but when I go to Firefox (which doesn't support MP4 files) the flash player stay on a black screen and buttons do nothing. Simple question: why? I don't understand, websites like vine.co or instagram use videoJs with no issue but for me this is not the case. So I tried to change the tech order, now Flash always try to read the video but even on chrome nothing append. This is my test code: <!DOCTYPE html>

Playing RTMP stream with VideoJS player

由 亡梦爱人 提交于 2020-01-13 07:04:27
问题 I'm trying to play RTMP stream with VideoJS player, below is my code: <head> <link href="http://vjs.zencdn.net/6.2.0/video-js.css" rel="stylesheet"> <!-- If you'd like to support IE8 --> <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> </head> <body> <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup='{"techorder" : ["flash"]}'> <source src="rtmp://184.72.239.149/vod/mp4/BigBuckBunny_115k.mov" type="rtmp/mp4"> <p class=

Playing RTMP stream with VideoJS player

由 …衆ロ難τιáo~ 提交于 2020-01-13 07:03:08
问题 I'm trying to play RTMP stream with VideoJS player, below is my code: <head> <link href="http://vjs.zencdn.net/6.2.0/video-js.css" rel="stylesheet"> <!-- If you'd like to support IE8 --> <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> </head> <body> <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup='{"techorder" : ["flash"]}'> <source src="rtmp://184.72.239.149/vod/mp4/BigBuckBunny_115k.mov" type="rtmp/mp4"> <p class=

HTML5 video from MVC3 action not working correctly

由 喜你入骨 提交于 2020-01-13 06:22:10
问题 I'm serving video from an MVC3 site, with the controller action that returns the video returning a FilePathResult, and when trying to play back in the browser, I'm seeing some frustrating issues, regardless of my using video.js or mediaelement.js. Chrome doesn't let you change the position using progressbar, nor does it allow you to replay the video once it has completed IE9 seems relatively fine Firefox doesn't show the elapsed/remaining time correctly However, if I just give a relative path
订阅 video.js