videojs中遇到的问题

1、The element or ID supplied is not valid. (videojs):

报错时页面中的代码顺序:js代码在head部分

<video id="example_video_1" class="video-js"
      controls preload="none" width="400" height="300"
        poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495886342401&di=af1c695a6acede0df16a3740f6dfec0b&imgtype=0&src=http%3A%2F%2Fatt2.citysbs.com%2Fhangzhou%2F2012%2F03%2F13%2F11%2Fmiddle_112501_kiuuladi_0aebaca9151431903ddb8b31fadc53c0.jpg"
        data-setup="{}">
        <source src="rtmp://pb-fms.chinanews.com.cn/vod/81913_wsj.mp4" type=‘rtmp/mp4‘/>
</video>
  <!-- 如果要支持IE8 -->
  <script src="ie8/videojs-ie8.js"></script>
  <!-- 播放器js -->
  <script src="video.js"></script>
  <script>
      videojs.options.flash.swf = "video-js.swf";
     var player = videojs(‘example_video_1‘);
     player.ready(function() {
        this.play();
        this.on(‘ended‘, function() {
          videojs.log(‘播放结束了!‘);
        });
     });
  </script>

通过在网上查阅,将js代码放置在页面底部后问题消失

Moving your script tag to the end of your page, or add an onLoad handler so it fires after the page has loaded.

参考:https://github.com/matthojo/videojs-Background/issues/7

时间: 2024-12-29 11:37:23

videojs中遇到的问题的相关文章

免费视频播放器videojs中文教程

Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于video.js的使用心得,有兴趣的可以点这里 , 阅读的人数还蛮多的,有些热心的读者甚至还给过我小额打赏,钱虽不多,但是很感动.最几天又收到几位网友的私信,问一些关于videojs使用方面的问题.我自己都不记得videojs长什么模样了,出于别人对我的信任,又回头看了一遍上一篇文章,还是2014年的时候写的,如今videojs的版本已经更新到

video.js视频播放器

免费视频播放器videojs中文教程 Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.js的介绍,可以访问官方网站介绍,我之前也写过一篇关于video.js的使用心得,有兴趣的可以点这里 , 阅读的人数还蛮多的,有些热心的读者甚至还给过我小额打赏,钱虽不多,但是很感动.最几天又收到几位网友的私信,问一些关于videojs使用方面的问题.我自己都不记得videojs长什么模样了,出于别人对我的信任,又回头看了一遍上一篇文章,还是2014年的时候写

video.js

1.github地址 2.常用API: class : video-js: video-js应用视频所需的风格.js功能,比如全屏和字幕. vjs-default-skin: vjs-default-skin默认皮肤适用于HTML控件,并且可以删除或覆盖创建自己的控制设计 data-setup 设置常用属性: autoplay :是否自动播放 controls: 设置是否可以人为控制播放 preload:{ 设置预加载 auto: 立即加载(浏览器允许的情况下) metadata:只加载视频的基

在网站中嵌入VideoJs视频播放器

一个博客难免需要引用视频来说明内容,但想要自己来实现一个视频播放器是不是一时半会就能完成的,更重要的是这需要对视频播放技术有一定的了解.于是自然而然的有人会想到开源项目. html5已经原生支持视频元素 而我正在使用地便是video.js.它能够控制基本的播放器样式,支持mp4.webm.ogv视频格式,也能够插入字幕,基本上能够满足常用需求. video.js也使用了html5的特性,如果浏览器不支持html5的话,想要播放视频还得用flash,虽然flash由于资源的消耗广为诟病,但是由于国

Videojs视频插件在React中的应用

1.介绍video.js视频插件 1.1 简单介绍 Video.js是一个通用的在网页上嵌入视频播放器的JS库,支持电脑端和移动端.Video.js自动检测浏览器对Html5的支持情况,如果不支持Html5,则自动使用Flash播放器.插件下载,如要支持ie低版本,点击此处下载. 1.2 入门使用 (1)载入CSS文件和JS文件 (2)在页面添加Html5的Video标签 id: 就是id. class:  video-js与vjs-default-skin,前者是JS识别,后者加载CSS,都是

搭建rtmp直播流服务之4:videoJS/ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)

前面几章讲解了使用nginx-rtmp搭建直播流媒体服务器,以及使用ffmpeg推流到nginx-rtmp服务器,java通过命令行调用ffmpeg实现推流服务,后端的事情到这里就已经全部完成了. 本章讲一下播放器的选用和二次开发,前端的播放器虽然有flex(flash)可以用,但是很遗憾flex接触的并不多,学习成本又太高,那么基于第三方开源的flash播放器二次开发就显得很有必要. 一.几种播放器选择 那么播放器,哪些已经不再更新的和收费的,这里不会介绍,只介绍两种轻量级的开源播放器. 1.

从国外开源项目中提取的继承类

javascript没有原生的继承语法,这确实很让人困惑,但是广大人民群从的智慧是无穷的.最近呢,正尝到一点从源码中学习的甜头,不分享一下实在难以平复激动的心情.前不久改造视频播放插件的时候,找到了videojs这个优秀的开源项目.经过一段时间深入学习它的源码,发现它的继承机制写的很好,而且短小精悍,于是决定把它拔离出来,做成一个单独的库,方便以后项目中使用. //定义一个命名空间 var xut = {}; /** * Core Object/Class for objects that us

HTML5音频播放,歌词同步,及视频播放功能(JPlayer、JWPlayer、VideoJS)

近期项目中用到音频视频播放.所以就写了一个demo: 这个是JPlayer插件的视频播放: 这个是音频播放,歌词同步: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <!--注意:在IIS上配置的时候,需加入mime映射,否则歌词出不来.在IIS列表中找到"MIME类型".进行加入.lrc类型;.mp4类型文件--> <head>     <

【转】一款开源免费跨浏览器的视频播放器--videojs使用介绍

特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/mao2080/ 最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上翻了个遍,试来试去,在所有的视频播放器中,就数它最实际了.首先我们来看看它的优点: 1.它是开源免费的,你可以在github很容易的获取它的最新代码. 2.使用它非常的容易,只要花