[HTML5和Flash视频播放器]Video.js 学习笔记(一 ) HLS库:videojs-contrib-hls

简介: DEMO地址:https://github.com/Tinywan/PHP_Experience https://github.com/videojs/videojs-contrib-hls 下载JS文件,直接使用 var player = videojs('example-video');player.play();videojs-contrib-hls支持一堆HLS功能。

 

DEMO地址:https://github.com/Tinywan/PHP_Experience

 

https://github.com/videojs/videojs-contrib-hls

 下载JS文件,直接使用

<video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls>
  <source
     src="https://example.com/index.m3u8"
     type="application/x-mpegURL">
</video>
<script src="video.js"></script>
<script src="videojs-contrib-hls.min.js"></script>
<script>
var player = videojs('example-video');
player.play();
</script>

videojs-contrib-hls支持一堆HLS功能。以下是一些亮点:

  • 视频点播和实况播放模式
  • 备份或冗余流
  • 中段质量切换
  • AES-128段加密
  • CEA-608字幕会自动翻译成标准的HTML5 标题文字曲目
  • In-Manifest WebVTT字幕自动翻译成标准的HTML5字幕轨道
  • 定时ID3元数据将自动翻译成HTML5 metedata文本轨道
  • 高度可定制的自适应比特率选择
  • 自动带宽跟踪
  • 使用CORS支持跨域凭据
  • 与video.js的紧密集成以及使用标准HTML API尽可能多地展现的理念
  • 流多个音轨并切换到那些音轨(参见docs文件夹)获取信息
  • 片段MP4 中的媒体内容, 而不是MPEG2-TS容器格式​​。

方法:

获取对象

var videoObj = videojs(“videoId”);

ready:

myPlayer.ready(function(){
    //在回调函数中,this代表当前播放器,
    //可以调用方法,也可以绑定事件。
})

播放:

myPlayer.play();

暂停:

myPlayer.pause();

获取播放进度:

var whereYouAt = myPlayer.currentTime();

设置播放进度:

myPlayer.currentTime(120);

视频持续时间,加载完成视频才可以知道视频时长,且在flash情况下无效

var howLongIsThis = myPlayer.duration();

缓冲,就是返回下载了多少

var whatHasBeenBuffered = myPlayer.buffered();

百分比的缓冲

var howMuchIsDownloaded = myPlayer.bufferedPercent();

声音大小(0-1之间)

var howLoudIsIt = myPlayer.volume();

设置声音大小

myPlayer.volume(0.5);

取得视频的宽度

var howWideIsIt = myPlayer.width();

设置宽度:

myPlayer.width(640);

获取高度

var howTallIsIt = myPlayer.height();

设置高度:

myPlayer.height(480);

一步到位的设置大小:

myPlayer.size(640,480);

全屏

myPlayer.enterFullScreen();

离开全屏

myPlayer.enterFullScreen();

添加事件

durationchange
ended //播放结束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause //暂停
play  //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited

var myFunc = function(){
// Do something when the event is fired
};

事件绑定

myPlayer.on("ended", function(){
    console.log("end", this.currentTime());
});
myPlayer.on("pause", function(){
    console.log("pause")
});

删除事件

myPlayer.removeEvent(“eventName”, myFunc); 

虽然文章说明在不支持html5的情况下,会以flash播放,但在支持html5的firefox下播放mp4时,却遇到很大的困难,虽然调用了flash,但一直无法播放(不过我也一直怀疑我的firefox下的flash有问题,不知道是不是真的)。不过如果你听从videojs的建议,放两个格式的视频,就不会有这个问题了。

另外video的写法中还有专门针对flash的写法,当然你也可以用这个插件实现纯粹的flash播放(只写flash那部分就好,可以保证统一的浏览效果,不过iOS的浏览器不兼容flash,这就要你自己进行判断来处理

 

选项参数设置


 

如何使用,初始化

您可以在播放器初始化时将选项对象传递给hls源处理程序。你可以像你对​​video.js的其他部分一样传递选项:

// html5 for html hls
videojs(video, {html5: {
  hls: {
    withCredentials: true
  }
}});

// or

// flash for flash hls
videojs(video, {flash: {
  hls: {
    withCredentials: true
  }
}});

// or

var options = {hls: {
  withCredentials: true;
}};

videojs(video, {flash: options, html5: options});
资源

一些选项,例如withCredentials可以传递给hls player.src

var player = videojs('some-video-id');

player.src({
  src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',
  type: 'application/x-mpegURL',
  withCredentials: true
});

 

直接改变URL地址:

    $(function () {
        $("#form_button").click(function () {
            var msg = $("#msg");
            stream_address = $('input[name="stream_address"] ').val();
            console.log(stream_address);
            if (stream_address == "") {
                $('#stream_address ').css("border", "1px #ff0000 solid");
                msg.text("请输入媒体流地址");
                msg.addClass("warning");
                return false;
            } else {
                $('#stream_address').css("border", "1px #ff00ff solid");
                msg.text("error");
                msg.removeClass("warning");
            }
            $('#stream_address_code ').html("\"" + stream_address + "\"");
            player.src({
                src:stream_address,
                type:"application/x-mpegURL"
            });
        });
    });

 

遇到的BUB、错误、解决方案!


 

The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://127.0.0.1

Nginx 配置文件修改跨域:

location /record {
                add_header Cache-Control no-cache;
                add_header 'Access-Control-Allow-Origin' '*' always;
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
                add_header 'Access-Control-Allow-Headers' 'Range';
                types{
                        application/dash+xml mpd;
                        application/vnd.apple.mpegurl m3u8;
                        video/mp2t ts;
                 }
                alias /home/tinywan/video_recordings;
}

 

目录
相关文章
|
5天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
32 1
|
10天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
21 3
|
13天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
27 4
|
12天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
36 0
html5+three.js公路开车小游戏源码
|
14天前
|
JavaScript 前端开发 搜索推荐
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。
|
21天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
72 6
|
18天前
|
存储 JavaScript 前端开发
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
|
1月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
41 3
|
1月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
1月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
101 1