viduojs播放录播视频

最新推荐文章于 2023-10-04 16:49:44 发布

milijiangjun

最新推荐文章于 2023-10-04 16:49:44 发布

阅读量294

点赞数

分类专栏： # html5

本文链接：https://blog.csdn.net/milijiangjun/article/details/108759624

版权

html5 专栏收录该内容

232 篇文章 4 订阅

订阅专栏

<!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>
    <script 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>
          <!-- <source id="source" src="http://ivi.bupt.edu.cn/hls/cctv1.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>

在这里插入图片描述

milijiangjun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
viduojs播放录播视频

<!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.csd
复制链接

扫一扫

专栏目录