Android防重复点击 微服务 Markdown jquery对象 javaweb是前端还是后端 js控制台打印 表白网页源码 python日期转时间戳 python安装配置 python的def python例子 java集合遍历 java泛型的使用 navicat注册机 笔记本外接显示器好吗 海妖花粉哪里多 通讯录管理系统 spss22安装教程 cad视口旋转 国都证券官网下载 cdr怎么画波浪线 diskman 无主之地2联机超时 文件批量更名 保留两位小数的函数 预测未来长相的软件 汉仪旗黑字体下载 手机上怎么剪辑音乐 cad打散 删除mysql服务 机械换装 idt声卡补丁 ps文字描边 php苹果动态锁屏 quadro显卡 脚本怎么写 smtp邮件服务器 sql语句执行顺序 淘宝退货上门取件流程 apk制作
当前位置: 首页 > 学习教程  > 编程语言

使用videojs实现视频播放

2020/9/19 14:09:53 文章标签:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>前端播放m3u8格式视频</title>
    <title>https://blog.csdn.net/qq_30282133/article/details/81566273</title>
    <!-- https://blog.csdn.net/qq_30282133/article/details/81566273 -->
    <link href="video-js.css" rel="stylesheet">
    <script src='video.js'></script>
    <script src="video.min.js" type="text/javascript"></script>
<!--    <style type="text/css" src="video-js7.4.1.css" ></style>
    <script type="text/javascript" src = "video/video7.4.1.js" ></script>
    <script type="text/javascript" src = "video/videojs-contrib-hls.min.js" ></script> -->
    
   <!--  
   
     -->
    <!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 -->
</head>
<body>
    <style>
        .video-js .vjs-tech {position: relative !important;}
        .video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}
    </style>
    <div style="width: 400px; height: 350px;" >
        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
            <source id="source" src="https://36421.long-vod.cdn.aodianyun.com/u/36421/m3u8/adaptive/694bd1238e40861c480698cdbf6ca4a9.m3u8" type="application/x-mpegURL"></source>
        </video>
    </div>
    <div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切换视频</div>
</body>
 
<script>

 videojs.addLanguage('zh-CN', {
            "Picture-in-Picture" : "画中画",
             "Exit Picture-in-Picture" : "退出画中画",
            "Play": "播放",
            "Pause": "暂停",
            "Current Time": "当前时间",
            "Duration": "时长",
            "Remaining Time": "剩余时间",
            "Stream Type": "媒体流类型",
            "LIVE": "直播",
            "Loaded": "加载完毕",
            "Progress": "进度",
            "Fullscreen": "全屏",
            "Non-Fullscreen": "退出全屏",
            "Mute": "静音",
            "Unmute": "取消静音",
            "Playback Rate": "播放速度",
            "Subtitles": "字幕",
            "subtitles off": "关闭字幕",
            "Captions": "内嵌字幕",
            "captions off": "关闭内嵌字幕",
            "Chapters": "节目段落",
            "Close Modal Dialog": "关闭弹窗",
            "Descriptions": "描述",
            "descriptions off": "关闭描述",
            "Audio Track": "音轨",
            "You aborted the media playback": "视频播放被终止",
            "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
            "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
            "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能,播放终止。",
            "No compatible source was found for this media.": "无法找到此视频兼容的源。",
            "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密,无法解密。",
            "Play Video": "播放视频",
            "Close": "关闭",
            "Modal Window": "弹窗",
            "This is a modal window": "这是一个弹窗",
            "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
            ", opens captions settings dialog": ", 开启标题设置弹窗",
            ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
            ", opens descriptions settings dialog": ", 开启描述设置弹窗",
            ", selected": ", 选择",
            "captions settings": "字幕设定",
            "Audio Player": "音频播放器",
            "Video Player": "视频播放器",
            "Replay": "重播",
            "Progress Bar": "进度小节",
            "Volume Level": "音量",
            "subtitles settings": "字幕设定",
            "descriptions settings": "描述设定",
            "Text": "文字",
            "White": "白",
            "Black": "黑",
            "Red": "红",
            "Green": "绿",
            "Blue": "蓝",
            "Yellow": "黄",
            "Magenta": "紫红",
            "Cyan": "青",
            "Background": "背景",
            "Window": "视窗",
            "Transparent": "透明",
            "Semi-Transparent": "半透明",
            "Opaque": "不透明",
            "Font Size": "字体尺寸",
            "Text Edge Style": "字体边缘样式",
            "None": "无",
            "Raised": "浮雕",
            "Depressed": "压低",
            "Uniform": "均匀",
            "Dropshadow": "下阴影",
            "Font Family": "字体库",
            "Proportional Sans-Serif": "比例无细体",
            "Monospace Sans-Serif": "单间隔无细体",
            "Proportional Serif": "比例细体",
            "Monospace Serif": "单间隔细体",
            "Casual": "舒适",
            "Script": "手写体",
            "Small Caps": "小型大写字体",
            "Reset": "重启",
            "restore all settings to the default values": "恢复全部设定至预设值",
            "Done": "完成",
            "Caption Settings Dialog": "字幕设定视窗",
            "Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",
            "End of dialog window.": "结束对话视窗"
        });
 
 

    // videojs 简单使用
    var myVideo = videojs('myVideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
    })
    myVideo.play()
    var changeVideo = function (vdoSrc) {
        if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式
            myVideo.src({
                src: vdoSrc,
                type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值
            })
        } else {
            myVideo.src(vdoSrc)
        }
        myVideo.load();
        myVideo.play();
    }
    var src = 'https://36421.long-vod.cdn.aodianyun.com/u/36421/m3u8/adaptive/694bd1238e40861c480698cdbf6ca4a9.m3u8';
    document.querySelector('.qiehuan').addEventListener('click', function () {
        changeVideo(src);
    })//视频切换
</script>

整体代码如上效果如图
在这里插入图片描述
带播放按钮声音和按钮转换功能
初始化的方式:
1.
一种是在标签里面加上class="video-js"和data-setup=’{}'属性。

注意,两者缺一不可。

刚开始的时候我觉得后面的值为空对象{},不放也行,

导致播放器加载不出来,后来加上来就可以了。
2.另外一种初始化 video.js 的方法是通过JS,格式:

var player = videojs(‘my-player’);
这样有个要求,就是不能配置data-setup,并且需要传入的id。

当然,如果不想一个个初始化,可以这样:

(function(){
var videos = document.getElementsByTagName(‘video’);
for(i=0; i<videos.length; i++) {
var video = videos[i];
if(video.className.indexOf(‘video-js’) > -1) {
videojs(video.id).ready(function(){
});
}
}
})();

播放按钮居中
video.js默认的播放按钮在左上角,应该是 video.js 开发人员认为放中间会遮挡内容,所以没放中间。

不过我们常见的一般都在中间,比较符合习惯。

这是可以通过参数修改的,在标签中加入vjs-big-play-centered类,就可以了。

像这样:

class=“video-js vjs-big-play-centered”

支持音乐标签
video.js 4.9开始支持标签,与video不同的是:播放audio时封面不会消失。

但是上面的播放框还是一直在的,配置方式和标签一样,也必须要配置data-setup参数。
禁止在iPhone safari中自动全屏
方法如下,在标签中加入playsinline参数,


注意,在iOS10之前用的是webkit-playsinline。
暂停时显示播放按钮
video.js 在未播放时,会显示一个大的播放按钮,上面我们提到如何让他居中。

那么,如何在视频暂停时也显示这个播放按钮呢?
有很多用JS的解决办法,感觉都挺麻烦的。

其实用CSS就可以搞定了:

.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;
}
是不是很轻便很简单 :)
播放按钮变○圆形
video.js 默认的播放按钮是圆角矩形,

我们一般更熟悉播放按钮为圆形的:

那么怎么改呢?还是用CSS来解决。

.video-js .vjs-big-play-button{
font-size: 2.5em;
line-height: 2.3em;
height: 2.5em;
width: 2.5em;
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
border-radius: 2.5em;
background-color: #73859f;
background-color: rgba(115,133,159,.5);
border-width: 0.15em;
margin-top: -1.25em;
margin-left: -1.75em;
}
/* 中间的播放箭头 /
.vjs-big-play-button .vjs-icon-placeholder {
font-size: 1.63em;
}
/
加载圆圈 */
.vjs-loading-spinner {
font-size: 2.5em;
width: 2em;
height: 2em;
border-radius: 1em;
margin-top: -1em;
margin-left: -1.5em;
}
因为原来居中的时候宽度和高度改变了,所以margin的值也要相应改变

7 点击屏幕播放/暂停
这个是视频播放的时候用得较多的功能,解决方法如下。

.video-js.vjs-playing .vjs-tech {
pointer-events: auto;
}
pointer-events是CSS的一个属性,用来控制鼠标的动作

现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清。比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框。而本文要说的pointer-events的风格更像JavaScript,它能够:

阻止用户的点击动作产生任何效果
阻止缺省鼠标指针的显示
阻止CSS里的hover和active状态的变化触发事件
阻止JavaScript点击动作触发的事件
一个CSS属性能做所有的这么多事情!

下面的这个链接上的 pointer-events属性值是none。点击它们,什么都不会发生。我还在“测试”链接上添加了监听器。如果pointer-events的值是none,对话框就不会弹出来,你可以在console里修改它的值,这样点击后就会弹出对话框!在这里插入图片描述
在这里插入图片描述
The CSS
这个pointer-events属性有很多可以使用的属性值,但大部分都是针对SVG的:auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 以及 inherit。其中none值能阻止点击、状态变化和鼠标指针变化:

.disabled { pointer-events: none; }
一些需要注意的关于pointer-events的事项:

子元素可以声明pointer-events来解禁父元素的阻止鼠标事件限制。
如果你对一个元素设置了click事件监听器,然后你移除了pointer-events样式声明,或把它的值改变为auto,监听器会重新生效。基本上,监听器会遵守pointer-events的设定。
观看演示
我第一次注意到pointer-events属性是在Firefox Marketplace网站上,他们拿它来禁止按钮的点击,这样的好处是样式上也得到了控制。当然,不要使用pointer-events来屏蔽一些十分关键的触发动作,因为这个样式可以通过浏览器控制台删除掉!
总有那么一些情形,我们需要 video.js 重新载入视频文件。

比如,立即播放刚上传的文件。

例如这样的标签:

重载 在video.js中,用现成的js方法就可以实现:

var video = document.getElementById(‘example_video’);
var source = document.getElementById(‘videoMP4’);
$("#reload").click(function() {
video.pause()
source.setAttribute(‘src’, ‘2.mp4’);
video.load();
video.play();
});
或者:

var video = document.getElementById(‘example_video’);
$("#reload").click(function() {
video.pause()
video.setAttribute(‘src’, ‘2.mp4’);
video.load();
video.play();
});

video.js 默认倒序显示时间,也就是视频播放的剩余时间。

要显示当前的播放时间,以及总共视频时长,加2行CSS解决:

.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}


本文链接: http://www.dtmao.cc/news_show_200085.shtml

附件下载

上一篇:Fiddler 教程

下一篇:spring学习02

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?