videojs--跨浏览器的HTML视频播放器（可自定义样式）

klinson 发布于2019-08-22 11:01 / 2054人阅读

摘要：官网写在前面，为什么选择这个播放器，因为有文档，支持添加插件，很方便自定义样式，比较活跃，有各种解决方案等不过没想到有那么多坑最简单的静态页面使用方法动态插入时初始化方法或者或者更多详细使用方法请查看官方文档常见问

官网

写在前面，为什么选择这个播放器，因为有文档，支持添加插件，很方便自定义样式，
比较活跃，github有各种bug解决方案等
不过没想到有那么多坑

最简单的静态页面使用方法

动态插入HTML时初始化方法

videojs("example_video_id", {}, function(){
  // Player (this) is initialized and ready.
});

或者

videojs(document.getElementById("example_video_id"), {}, function() {
  // This is functionally the same as the previous example.
});

或者

videojs(document.getElementsByClassName("awesome_video_class")[0], {}, function() {
  // You can grab an element by class if you"d like, just make sure
  // if it"s an array that you pick one (here we chose the first).
});

更多详细使用方法请查看官方文档

常见问题汇总

1，pc端正常，IOS上面不起作用

data-setup="{"customControlsOnMobile": true}"//版本4

data-setup="{"nativeControlsForTouch": false}" //版本5

或者写在
videojs(document.getElementById("example_video_id"), {"nativeControlsForTouch": false}, function() {
  // This is functionally the same as the previous example.
});

2，其它错误

先调用官方的视频做测试，http://vjs.zencdn.net/v/oceans.mp4，

如果这个正常，其它的格式异常，请参考：

[异常1][2]  http://stackoverflow.com/questions/16697473/videojs-4-native-controls-now-default-on-mobile

[异常2][3] http://stackoverflow.com/questions/26182101/videojs-hls-not-working

3,只是在Iphone上不起作用（官网示例 5.8）参考：github issue

if (browser.TOUCH_ENABLED && options.nativeControlsForTouch === true || browser.IS_IPHONE || browser.IS_NATIVE_ANDROID) {
                this.setControls(true);
            }
            
 //替换为
if ((browser.TOUCH_ENABLED || browser.IS_IPHONE || browser.IS_IPHONE || browser.IS_NATIVE_ANDROID) && options.nativeControlsForTouch === true){
                this.setControls(true);
            }

4,默认不全屏播放

前台：

IOS 参考：

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-SW30

云服务器 GPU云服务器 h5视频播放器可自定义样式可自定义大小 html表格定义样式播放视频的html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91635.html

audiojs--跨浏览器的HTML音频播放器（可自定义样式）

摘要：一款跨浏览器的音频播放器，可惜例子和文档都比较少英文文档官网使用方法第一步引用文件第二步，全局初始化第三步，在需要的地方放上下面类似的代码注意是直接闭合标签然后，然后就没有了，以上只适用静态的页面，如果动态添加音频怎么办相信好多人都需要这种一款跨浏览器的音频播放器，可惜例子和文档都比较少英文文档官网使用方法：第一步引用文件：第二步，全局初始化： audiojs.ev...

GHOST_349178 2019-08-22 11:01 评论0 收藏0
记录一波video.js的使用及问题

摘要：最近的项目中需要播放视频，鉴于元素的一些坑及不想自己造轮子，于是就找到了端播放视频使用量最多的插件，是国外开发者开发的，英语本身就不好的我看英文文档简直是折磨，国内又没有中文文档，能搜的到的基本是简单的使用及最基本的的介绍，想要实现一些自定最近的项目中需要播放视频，鉴于html5元素的一些坑及不想自己造轮子，于是就找到了web端播放视频使用量最多的插件video.js，video.j...

crossoverJie 2019-08-23 17:01 评论0 收藏0
larkplayer: 插件化的 HTML5 播放器

摘要：是一款轻量级易扩展的播放器，是为解决一些中小型的视频业务场景。同时各插件由于是面向的播放器接口，插件不知道插件的存在，因此能极大地降低各插件功能间的耦合。 larkplayer 是一款轻量级 & 易扩展的 html5 播放器，是为解决一些中小型的视频业务场景。这些业务不一定需要大而全的解决方案，并且他们往往有自己的定制化需求。背景为什么要编写 larkplayer？（注意，这里面有...

lijy91 2019-08-02 16:05 评论0 收藏0