flvjs实现http-flv流媒体点播和直播播放效果代码
代码语言:html
所属分类:多媒体
代码描述:flvjs实现http-flv流媒体点播和直播播放效果代码。如果您的流媒体是http,请在http下运行。
代码标签: flvjs http-flv 流媒体 点播 直播
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <style> .mainContainer { display: block; width: 100%; margin-left: auto; margin-right: auto; } @media screen and (min-width: 1152px) { .mainContainer { display: block; width: 1152px; margin-left: auto; margin-right: auto; } } .video-container { position: relative; margin-top: 8px; } .video-container:before { display: block; content: ""; width: 100%; padding-bottom: 56.25%; } .video-container > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .video-container video { width: 100%; height: 100%; } .urlInput { display: block; width: 100%; margin-left: auto; margin-right: auto; margin-top: 8px; margin-bottom: 8px; } .centeredVideo { display: block; width: 100%; height: 100%; margin-left: auto; margin-right: auto; margin-bottom: auto; } .controls { display: block; width: 100%; text-align: left; margin-left: auto; margin-right: auto; margin-top: 8px; margin-bottom: 10px; } .logcatBox { border-color: #CCCCCC; font-size: 11px; font-family: Menlo, Consolas, monospace; display: block; width: 100%; text-align: left; margin-left: auto; margin-right: auto; } .url-input , .options { font-size: 13px; } .url-input { display: flex; } .url-input label { flex: initial; } .url-input input { flex: auto; margin-left: 8px; } .url-input button { flex: initial; margin-left: 8px; } .options { margin-top: 5px; } .hidden { display: none; } </style> </head> <body> <div class="mainContainer"> <div> <div id="streamURL"> <div class="url-input"> <label for="sURL">流媒体 URL:</label> <input id="sURL" type="text" value="http://127.0.0.1/flv/7182741-1.flv" /> <button onclick="switch_mds()">切换到元数据</button> </div> <div class="options"> <input type="checkbox" id="isLive" onchange="saveSettings()" /> <label for="isLive">是否直播</label> <input type="checkbox" id="withCredentials" onchange="saveSettings()" /> <label for="withCredentials">是否验证</label> <input type="checkbox" id="hasAudio" onchange="saveSettings()" checked /> <label for="hasAudio">有声音信号</label> <input type="checkbox" id="hasVideo" onchange="saveSettings()" checked /> <label for="hasVideo">有视频信号</label> </div> </div> <div id="mediaSourceURL" class="hidden"> <div class="url-input"> <label for="msURL">元数据 JsonURL:</label> <input id="msURL" type="text" value="http://127.0.0.1/flv/7182741.json" /> <button onclick="switch_url()">切换到url</button> </div> </div> </div> <div class="video-container"> <div> <video name="videoElement" class="centeredVideo" controls autoplay> 您的浏览器不支持html5播放 </video> </div> </div> <div class="controls"> <button onclick="flv_load()">加载</button> <button onclick="flv_start()">播放</button> <button onclick="flv_pause()">暂停</button> <button onclick="flv_destroy()">销毁</button> <input style="width:100px" type="text" name="seekpoint" /> <button onclick="flv_seekto()">跳到</button> </div> <textarea name="logcatbox" class="logcatBox" rows="10" readonly></textarea> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/flv.4.1.0.js"></script> <script> var checkBoxFields = ['isLive', 'withCredentials', 'hasAudio', 'hasVideo']; var streamURL, mediaSourceURL; function flv_load() { console.log('isSupported: ' + flvjs.isSupported()); if (mediaSourceURL.className === '') { var url = document.getElementById('msURL').value; var xh.........完整代码请登录后点击上方下载按钮下载查看
网友评论0