video.js插件设置的远程地址上的视频,在谷歌浏览器上进度条不能拖动,一拖动就重新播放 20C

ideo.js插件设置的远程地址上的视频,在谷歌浏览器上进度条不能拖动,一拖动就重新播放,不能在进度条上点到哪播放到哪
在别的浏览器上都是可以拖动进度条播放的,求问谷歌浏览器要怎么解决

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video.js 5.18.4</title>
    <link href="css/video-js.css" rel="stylesheet">
    <!-- If you'd like to support IE8 -->
    <script src="js/videojs-ie8.min.js"></script>
    <script src="js/video.min.js"></script> 
    <style>
        body{background-color: #191919}
        .m{ width: 1000px; height: 1000; margin-left: auto; margin-right: auto; margin-top: 100px; }
    </style>
</head>

<body>
    <div class="m">
        <video id="my-video" class="video-js" controls preload="auto" width="1000" height="800" autoplay="autoplay"
           data-setup="{}">
            <source src="http://192.168.1.56:8550/tools/download.ashx?site=main&id=1020" 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>

          <script type="text/javascript">
            var myPlayer = videojs('my-video');
            videojs("my-video").ready(function(){
                var myPlayer = this;
                myPlayer.play();
            });
        </script>
    </div>
</body>
</html>
0

3个回答

1
tongkaiming
tongkaiming 回复sinat_37028632: 需要在video加一些属性,不好意思这几天没登录csdn
12 个月之前 回复
tongkaiming
tongkaiming 回复sinat_37028632: <video class="center-block" muted id="media" src="" height="500" controls="controls" preload="metadata" playsinline="true" webkit-playsinline="true" x5-video-player-fullscreen="false" x5-video-player-type="h5" x5-video-orientation="portraint">您的浏览器不支持 video 标签 </video>
12 个月之前 回复
sinat_37028632
DD_q 3q,代码正好用到了,但是在IE浏览器下就无法播放了。。
12 个月之前 回复

你可以看看是不是视频编码格式的问题,Chrome只支持H264

0

一般播放有两种方式,一种是请求服务器处理视频并传回,第二种直接请求xxx.mp4.
要实现拉动滚动条,第二种默认是可以的。第一种需要断点续传

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
video在谷歌chrome浏览器中点击进度条就重新播放问题
chrome浏览器中video中视频可以正常播放,但拖动进度条到新位置player.currentTime一直为0,进度条无法拖动,点击进度条会从0开始播放。 无论是原生video标签还是使用video.js都有这问题 但是在火狐和ie浏览器中并没有后这种问题。   解决方案: 如果视频时本地视频,暂时没有找到解决办法,只能自己写事件控制。 只有把video的src换成服务器地址,进度...
videojs视频可拖动播放与不可拖动播放
videojs视频可拖动播放与不可拖动播放
videojs进度条禁用
根据客户需要,video播放视频时,不能拖动进度条,思来想去无解,于是翻墙找大牛,果然老外还是流弊。这个例子大家可以参考
Chrome浏览器Video无法拖动的探索和解决方案
适用于MP4无法通过URL作为静态内容返回的场景。 环境: 服务端 .Net MVC。 客户端 Chrome浏览器 播放环境 Video原生标签 MP4物理路径无法通过IIS请求到,需通过程序读取到内存然后返回。(如果这个MP4是静态内容,不需要程序处理即IIS直接处理,则一般不会有这个问题) 问题:无法进行拖放或者拖放以后要重头进行播放。 故障原因:与Video标签适配的请求未被响应...
HTML 禁止拖动Video进度条
其实当初我以为做这个很简单然后我百度了一下,找到了以下几个办法1、用个透明的层或图片把进度条盖住2、如果是浏览器自动渲染是无法定义的,可以使用第三方的html5播放器插件,3、自己写进度条然后我需要一个去尝试 第一个很简单,一个DIV给挡住,但是包括进度条以及暂停和声量包括全屏无法点,我觉得挺好 的,就按照这个做了,然后就被喷了,不满足客户需求,奖励继续留下来加班。第二个用其他插件,感觉 <vid
html5 audio demo【修复拖动进度条bug】
html5 audio自定义样式以及播放控制demo。以前那个有bug,csdn太坑不能删除或者修改,只能重新上传一个了
关于动态生成的mp3在audio标签无法拖动的问题
html5 audio video不需要插件即可播放音频和视频,currentTime可以用来设置播放的起始时间,使得可以不从文件开头开始播放。如果 html5 audio video设置currentTime失效,无法设置开始播放的时间点,audio/video不能拖动进度条调整播放进度,很有可能是使用了php asp jsp等服务器后端语言动态输出待播放的媒体文件内容,如果audio/vide...
关于视频播放器拖动点击问题
对于播放器大家都不陌生,我在实现播放器下的滑动用的是SeekBar,SeekBar是Android自带的控件,支持滑动,点击主要是他的这个方法:   布局文件是这样的实现的: 这就是我用原生的SeekBar实现的,支持点击和拖动但是问题来了,我用SeekBar做了另外一个播放器,用的是ijk实现的播放器,实现代码差不多 private final SeekB
h5,video禁止拖动进度条,禁止快进
利用jq简单控制h5视频播放进度条,让使用者不能快进,可以后退。原理是每500毫秒记录一次进度条时间,如果下一个500毫秒的进度减去上一个500毫秒的进度大于1秒,那么就让视频返回到上一个进度,因项目开发中对于视频播放只有这么一个要求,所以搞得比较简单。代码仅作参考。大神轻喷。
html,video禁止拖动进度条,禁止快进
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1....
HorizontalDragLayout-模仿QQ客户端的Item滑动删除
首先感谢http://blog.csdn.net/lmj623565791/article/details/46858663hongyang的文章,之前看过ViewDragHelper类也读过一些demo一直都是半知半解且之前一些自定义的ViewGroup大都不是按这种方式来写,这一次抓紧一次自己写一个demo熟悉ViewDragHelper。ViewDragHelper存在于v4包种,目的用于帮助
视频播放控制,添加一个滚动条 。(拖动/自动)
1,代码及注释(只注释新功能代码) /*创建一个全局变量来表示滚动位置,并添加一个回调函数来更新和重新设置视频读入位置*/ #include &quot;highgui.h&quot; #incldue &quot;cv.h&quot; //定义滚动全局变量 int g_slider_postion = 0; //定义CvCapture对象为全局变量(回调函数会用到CvCapture对象) CvCapture* g_cap...
jwplayer 禁止视频的快进,但是可以后退(已实现)
一直在研究.net 的视频播放,最近做起了jwplayer,然后项目要求是视频不能快进,但是可以重复观看已经看过的视频资源。 很简单 在标签&lt;script&gt; 中定义两个变量 var maxPlayPosition = parseInt({KS:Field:historytime}); var seeking = false; 然后在代码的适当位置...
video.js 实现视频只能后退,不能快进
主要思路是点击进度条需要获取拖动前的时间点,我用mouseup事件去处理的,获得到了oldTime 就好办,然后根据需求限制拖动快进快退,因为项目允许回看,不允许快进,所以得记录maxTime,记录用户正常情况观看视频最大的那个时间点,不允许超过maxTime var isMousedown = false; var oldTime=0,newTime=0,maxTime=0; //拖动...
如何让播放器支持从未下载的时间点开始播放(支持随意拖动)
要支持该功能,需要考虑的因素包括:视频文件,服务器,播放器设置一:视频文件要存在关键时间点。这是标准的格式所决定的。不管是flv还是mp4都需要,举一个简单的示例,比如视频文件名1.flv里存在的关键时间点和关键帧数据如下1,5,10,15,201000,1500,2000,2500,3000上面是一一对应的,即有一个关键时间点就会有一个关键帧,这些是视频本身的信息。要转换视频时就需要把这些信息写...
视频画中画效果,拖动进度条可以seek到相应视频帧显示
在视频开发中,我们常常看到这样的效果,拖动进度条时,或是在进度条上方或是在屏幕中间,显示拖动进度条位置时刻的某一帧画面。这个需求,如果是你,你会如何做?通常一个需求,不仅...
Vue移动端video的控制条禁止拖动快进(兼容Android和ios)
最近公司做一个刷课时的项目,要求在移动端禁止拖动进度条,并有记录播放时间功能,找个了各种方法,整合记录一下。 HTML: &amp;lt;video id=&quot;video&quot; src=&quot;xxx.mp4&quot; controls=&quot;controls&quot; x5-playsinline=&quot;&quot; playsinline=&quot;&quot; webkit-playsinline=&quot;true&quot;&amp;gt;&amp;lt;
MP4视频修复不能拖动转换精灵绿色版
MP4视频修复不能拖动,视频转换成AVi,视频修复磁道损坏,视频格式转换。
video标签进度条圆点多次点击会造成页面的所有点击事件失效
如图所示,在ios微信端H5页面的video标签,如果多次点击圆点或反复拖动进度条,会造成页面上所有的点击事件失效解决办法: 给video绑定点击事件,当页面上所有按钮的点击事件失效后,会自动执行video的点击事件。...
django 18、video播放时间不能超过5s并且视频有时无法显示问题的解决方法
起因:我用django自己建了一个网站,以mod_wsgi+apache的方式部署在阿里云的ubuntu系统上,网站上的视频播放我是用的html中的video标签做的,但是我发现我只能播放时长&amp;lt;=5s的视频,大于这个时长的视频就会提示: 视频播放因网络错误而终止。 我的播放视频的代码是: &amp;lt;video src=&quot;0.mp4&quot; controls=&quot;controls&quot; style=&quot;w...
禁止拖动滚动条的mp4播放器
首选,需要Video-js的css: http://download.csdn.net/detail/sunroyi666/9588419 JSP代码如下: <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+
videoJS cordova IOS 播放视频双进度条问题
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 引用块内容加粗 Ctrl + B 斜体 Ctrl + I 引用
小程序开发如何实现视频或音频自定义可拖拽进度条
  程序原生组件的音频播放时并没有进度条的显示,而此次在我们所接的项目中,鉴于原生的视频进度条样式太丑,产品要求做一个可拖拽的进度条满足需求。视频和音频提供的api大致是相似的,可以根据以下代码修改为与音频相关的进度条。 wxml的结构如下: &amp;lt;video id=&quot;myVideo&quot; src=&quot;http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodow...
小程序开发之视频开发 适配 禁止拖动进度
小程序拥有着自己封装的一套控件,和html控件大致相似但是也有很多不同之处.直接进入正题小程序的video标签认宽度300px、高度225px,设置宽高需要通过wxss设置width和height。但是各种机型不同的屏幕就需要进行适配,小程序也提供了一个方法用来获取手机的信息的方法,其中也包含了宽和高  videoWidth 和videoHeight 就是...
ios-自定义AVPlayer-可以点击拖动的进度条
上图: 上代码: #import &quot;FQQVideoPlayerViewController.h&quot; #import &amp;lt;AVFoundation/AVFoundation.h&amp;gt; #import &quot;BottomView.h&quot; typedef NS_ENUM(NSInteger, PlayerStatu){ None, ...
jquery插件实现播放进度条
自己写了一个插件,主要是实现播放进度条的,学生学习作品,可以拖动。不过在移动端还是不可拖动。 主要原理是设置一个容器,例如div,获得它的长度,然后设置时间,单位毫秒,把获得的长度除以时间,利用js定时器,每1秒改变一次。这就基本实现进度条了。 拖动的话,就是处理鼠标按下,移动,抬起这些动作来处理的。东西已经托管到github了地址 https://github.com/IMMC,有兴趣可以看
unity手动拖拽播放视频的bug小结
bug再现: 当把播放的视频拖拽到MovieTexture上,打包后 即使将这个视频删除了,程序仍可以播放视频。 movieTexture.Play(); 直接播放视频。经过群里大神指导发现,当你拖拽物体到对应的脚本时候unity自己会关联资源关系,从而直接打包到项目中。 www动态加载播放视频代码:using UnityEngine; using System.Collecti
【转换工具】让MP4可以拖动播放
几百M的MP4传到服务器上后,但是在网页上需要加载完成后才播放。此国外的工具将MP4进行信息调整,使其可以在网页中播放时实现边加载边播放。
jquery可以拖动的进度条
有效果的 大家都懂!
Unity 手指滑动控制视频播放进度。
1:我这边在一开始做的时候用的是unity自带videoPlayer来做视频的控制器的,后来测试发现滑动的并不是那么平滑,后来改为了AVPro这个插件,就比较平滑。 2:下面是代码 using System.Collections.Generic; using UnityEngine; using UnityEngine.Video; using UnityEngine.UI; using...
js实现手机端音频进度条拖拽
主要功能: 1、支持点击进度条调整播放的位置 2、显示音乐的播放时间 3、暂停播放等~ js //以下显示的136为音频的总时长 var vm = new Vue({ el: '#container', data: { progress_g_w:0, circle_w:0, pause:tru...
实现本地音乐选择,播放,带可拖动进度条
Android实现扫描本地sdcard上的所有音乐.并且可以进行播放,带可拖动进度条。 博客地址:http://blog.csdn.net/lowprofile_coding/article/details/45820163
关于MP4视频拖动的原理与分析(一)
本来想说说关于mp4和一些常见视频文件格式方面的历史。现在想想没啥必要,毕竟本文是在讲关于mp4点播拖动方面的技术细节。绪论,前言神马的显得有点多余。说起MP4,不得不提“Digital container format”的概念。维基百科给出解释: A container or wrapper format is a metafile format whose specification des
ios多线程 - NSThread 简介
NSThread
解决浏览器Adobe Flash Player不是最新版本问题
1、首先打开浏览器,登录网址【http://www.adobe.com/cn/】; 2、点击【菜单】,下拉打开的列表,找到并点击【Adobe Flash Player】; 3、点击页面上的【您是否有其他操作系统或浏览器?】按钮; 4、根据自己的情况,先选择操作系统,需要注意的是,在选择Adobe Flash Player的版本时,一定要看准,要选择PPAPI版本的,现在谷歌浏览器已经停止支持
破解好大学在线MOOC视频播放器首次观看课程的进度条无法快进的限制
破解好大学在线MOOC视频播放器首次观看课程的进度条无法快进的限制 0x00 前言 最近笔者所就读的学校中新开了一门课程,与此课程相关的教学资源被任课教师放置在了好大学在线MOOC平台上。该平台的教学视频播放存在着一些限制:初次播放的视频不能以拖动进度条的方式跳转到未观看过的时间点,只能在已经播放过的时间段内拖动视频进度条。与此同时,全程只能以最高二倍速的速度播放整个教学视频。这一限制引起了笔者的...
解决video标签播放m3u8格式视频失败问题
前言 什么是m3u8? 效果 效果地址 m3u8视频切换 效果图片 解决方法 采用video.js插件! 引入 引入videoJS插件样式文件; 引入videoJS插件JS文件; 引入videoJS插件播放m3u8格式视频的HLS功能。 &amp;lt;link href=&quot;./video-js.css&quot; rel=&quot;stylesheet&quot;&amp;gt;...
Web Audio接收文件流导致无法快进的一个解决思路
场景: 使用原生Audio代替Flash播放器。 问题:音频可以播放,但是无法快进,即无法跳转某个播放位置继续播放音频不是实时流,而是后台将文件转为流传回浏览器,跟直接访问音频文件地址没太大差别。解决思路:查看浏览器直接播放音频文件时的浏览器响应,发现头部部分字段不一致,解决方法:后台响应添加如下Header:response.addHeader("Accept-Ranges", "bytes")
FFmpeg——Windows下,视频播放器3:绘制画面、缩放、暂停、拖拽进度条
#include "XFFmpeg.h"#pragma comment(lib, "avformat.lib") #pragma comment(lib, "avutil.lib") #pragma comment(lib, "avcodec.lib") #pragma comment(lib, "swscale.lib")static double r2d(AVRational r) {
video.js 视频播放插件及常见问题
这几天想在web端实现直播 rtmp 格式 视频 ,试了好几个插件 ,jwplayer  ckplayer   plyr 等,都不是很顺手  ,感觉还是video 配置简单 ,文档 通俗易懂 。 http://docs.videojs.com/tutorial-options.html  这是文档地址 ,大部分问题 都可以 解决,比百度效率高。 https://github.com/video