console
function initShareButtons(){var init=function(selector,width,height,url){var left=(screen.width-width)/2;var top=(screen.height-height)/2;var params='top='+top+', left='+left+', width='+width+', height='+height;$(selector).click(function(){window.open(url,'_blank',params);});}
var url=encodeURIComponent(location.href);var text=encodeURIComponent($(document).find("title").text());init('.hp-social-fb',550,420,'https://www.facebook.com/sharer.php?u='+url);init('.hp-social-tw',550,420,'https://twitter.com/share?url='+url+'&text='+text);}
function isMobile(){return(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));}
function playM3U8(src){window.location.hash='type=m3u8&src='+encodeURIComponent(src);$('#player-tip').hide();if($('#player-proxy').prop('checked')){src=src.replace(/https?:\/\//i,'https://localhost/fetch.php/')}
if(isMobile()){playM3U8byNative(src);}else{playM3U8byHlsJS(src);}}
function playM3U8byNative(src){var html='<video id="player" controls autoplay>';html+='<source src="'+src+'" type="application/x-mpegurl">'
html+='<source src="'+src+'" type="video/mp4">'
html+='</video>';$('#player').replaceWith(html);return;}
function playM3U8byHlsJS(src){$('#player').replaceWith('<video id="player" controls></video>');var video=document.getElementById('player');var hls=new Hls();hls.attachMedia(video);hls.on(Hls.Events.MEDIA_ATTACHED,function(){console.log("video and hls.js are now bound together !");hls.loadSource(src);hls.on(Hls.Events.MANIFEST_PARSED,function(event,data){console.log("manifest loaded, found "+data.levels.length+" quality level");video.play();});});}
function playM3U8byGrindPlayer(src){if(src.indexOf(".3mu8")==-1){src=src+"#.m3u8";}
var flashvars={autoPlay:'true',src:escape(src),scaleMode:'letterbox',plugin_hls:'/player/grindplayer/flashlsOSMF.swf',hls_debug:false,hls_debug2:false,hls_minbufferlength:-1,hls_lowbufferlength:2,hls_maxbufferlength:60,hls_startfromlowestlevel:false,hls_seekfromlowestlevel:false,hls_live_flushurlcache:false,hls_seekmode:'ACCURATE',hls_capleveltostage:false,hls_maxlevelcappingmode:'downscale'};var params={allowFullScreen:'true',allowScriptAccess:'always',wmode:'opaque'};var attributes={id:'player'};swfobject.embedSWF('/player/grindplayer/GrindPlayer.swf','player','640','480','10.2',null,flashvars,params,attributes);}
var videojsScriptRequested=false;var videojsPlayer=null;function playM3U8byVideoJS(src){if(!videojsScriptRequested){videojsScriptRequested=true;var link=document.createElement('link');link.href='/player/videojs/video-js.css';link.rel='stylesheet';document.body.appendChild(link);var script=document.createElement('script');script.src='/player/videojs/videojs-hls-bundle.js';script.onload=function(){playM3U8byVideoJSCallback(src);};document.body.appendChild(script);}else{playM3U8byVideoJSCallback(src);}}
function playM3U8byVideoJSCallback(src){if(videojsPlayer){videojsPlayer.dispose();videojsPlayer=null;$('#player-container').append('<div id="player"></div>');}
var attributes={'id':'player','class':'video-js vjs-default-skin','width':'auto','height':'auto','controls':' ','autoplay':'','preload':'auto','data-setup':'{}'}
var element=$('<video><source type="application/x-mpegURL" src="'+src+'"></source></video>').attr(attributes)
$("#player").replaceWith(element);videojsPlayer=videojs("#player",{},function(){});}
function playRTMP(src){window.location.hash='type=rtmp&src='+encodeURIComponent(src);$('#player-tip').hide();if(isMobile()){$('#player-tip').html("RTMP protocol is not supported on your device.");return;}
var flashvars={autoPlay:'true',src:escape(src),streamType:'live',scaleMode:'letterbox',};var params={allowFullScreen:'true',allowScriptAccess:'always',wmode:'opaque'};var attributes={id:'player'};swfobject.embedSWF('/player/grindplayer/GrindPlayer.swf','player','640','480','10.2',null,flashvars,params,attributes);}
function playMP4(src){window.location.hash='type=mp4&src='+encodeURIComponent(src);$('#player-tip').hide();var html='<video id="player" controls autoplay>';html+='<source src="'+src+'" type="video/mp4">'
html+='</video>';$('#player').replaceWith(html);}
$(document).ready(function(){initShareButtons();if(window.location.hash){var hash=window.location.hash.substr(1);var result=hash.split('&').reduce(function(result,item){var parts=item.split('=');result[parts[0]]=parts[1];return result;},{});console.log(result);if(result.src){var src=decodeURIComponent(result.src);$('#player-src').val(src)
if("rtmp"==result.type){playRTMP(src);}else if("mp4"==result.type){playMP4(src);}else{playM3U8(src);}}}});
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
<title>视频播放</title>
<link rel="stylesheet" type="text/css" href="//jsrun.net/LKUKp.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
</head>
<body>
<div class="hp-body container">
<div class="player-section">
<div class="container">
<div id="player-container">
<div id="player" poster="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinakd20200808ac%2F424%2Fw1301h723%2F20200808%2F47a3-ixkvvue3364411.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637051055&t=be30c39400fff59d9c9c1a0163c06ca0"></div>
视频列表：
<div style="background-color:silver;">
<option class="option btn btn-link" value="https://hls.cntv.myhwcdn.cn/asp/hls/1200/0303000a/3/default/178c2a68b46d42b0a44c112149a963fe/1200.m3u8">新闻 长津湖</option>
<option class="option btn btn-link" value="https://m3u8ipay.vodfile.m1905.com/202110180708/1f29bbca5b22a6b0d7d6c0aa9cd8c6c3/1305/1305305C3114E91F44677B-896k.m3u8">电影 腾越殇魂</option>
<option class="option btn btn-link" value="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8">动画 片段</option>
<option class="option btn btn-link" value="http://fspc.hw.kugou.com/202110171617/91a7d426cad5fae832b989662692ea83/G240/M09/1C/03/MA4DAF9kisyAA_BmAD9dC_vjTtg196.mp3">mp3 测试</option>
<option class="option btn btn-link" value="http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4">mp4 测试</option>
<option class="option btn btn-link" value="https://audio04.dmhmusic.com/71_53_T10062032759_128_4_1_0_sdk-cpm/cn/0102/M00/82/6E/ChR45GFv5o6Aa6R-ABLQLNdnL-4074.mp3?xcode=1b8cf16a4d083a4790c61c406a7788d6f5b5c56">mp3</option>
</div>
<div id="player-tip"></div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/hls.js/1.0.8-0.canary.7807/hls.js"></script>
<script src="//jsrun.net/LKUKp.js"></script>
<script>
function play(url) {
var src = url;
if (src) {
playM3U8(src);
}
return false;
}
$(document).ready(function() {
play("https://hls.cntv.myhwcdn.cn/asp/hls/1200/0303000a/3/default/178c2a68b46d42b0a44c112149a963fe/1200.m3u8");
});
$(".option").click(function($event) {
play(event.target.value);
} )
</script>
</body>
</html>
html {
min-height: 100%;
}
@media ( min-width : 1200px) {
.container {
width: 970px;
}
}
.no-padding {
padding: 0 !important;
}
.no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.no-break-out {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.hp-body {
min-height: 500px;
}
.player-section {
background: #f5f5f5;
}
.player-section #player-container {
position: relative;
width: 100%;
height: 423px;
margin: 30px auto;
background: black;
}
@media ( max-width : 767px) {
.player-section #player-container {
height: 300px;
}
}
.player-section #player-notes {
text-align: center;
margin-top: 15px;
margin-bottom: -20px;
font-size: 13px;
}
.player-section #player {
width: 100%;
height: 100%;
}
.player-section #player-tip {
position: absolute;
width: 100%;
top: 50%;
margin-top: -20px;
text-align: center;
color: #ccc;
visibility: hidden;
}