117 lines
4.4 KiB
HTML
117 lines
4.4 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.min.css" rel="stylesheet" />
|
|||
|
|
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 Webrtc 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 TXLivePlayer-x.x.x.min.js。-->
|
|||
|
|
<!--有些浏览器环境不支持 Webrtc，播放器会将 Webrtc 流地址自动转换为 HLS 格式地址，因此快直播场景同样需要引入hls.min.x.xx.xm.js。-->
|
|||
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/TXLivePlayer-1.2.3.min.js"></script>
|
|||
|
|
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 协议的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.xm.js。-->
|
|||
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/hls.min.1.1.5.js"></script>
|
|||
|
|
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 FLV 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 flv.min.x.x.x.js。-->
|
|||
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/flv.min.1.6.3.js"></script>
|
|||
|
|
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 DASH 视频，需要在 tcplayer.vx.x.x.min.js 之前引入 dash.min.x.x.x.js。-->
|
|||
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/libs/dash.all.min.4.4.1.js"></script>
|
|||
|
|
<!--播放器脚本文件-->
|
|||
|
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.v4.6.0.min.js"></script>
|
|||
|
|
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport"
|
|||
|
|
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|||
|
|
<title>Document</title>
|
|||
|
|
<style>
|
|||
|
|
/* // // 播放按钮 */
|
|||
|
|
#videoDeom::-webkit-media-controls-play-button {
|
|||
|
|
display: none !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* // 当前播放时间 */
|
|||
|
|
#videoDeom::-webkit-media-controls-current-time-display {
|
|||
|
|
display: none !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* // 剩余时间 */
|
|||
|
|
#videoDeom::-webkit-media-controls-time-remaining-display {
|
|||
|
|
display: none !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* // 音量按钮 */
|
|||
|
|
#videoDeom::-webkit-media-controls-volume-control-container {
|
|||
|
|
/* display: none !important; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* // 全屏 */
|
|||
|
|
#videoDeom::-webkit-media-controls-fullscreen-button {
|
|||
|
|
/* display: none !important; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* // 时间轴 */
|
|||
|
|
#videoDeom::-webkit-media-controls-timeline {
|
|||
|
|
/* display: none !important; */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* // 更多选项 --然而并不生效 */
|
|||
|
|
#videoDeom::-internal-media-controls-overflow-button {
|
|||
|
|
display: none !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* #videoDeom {
|
|||
|
|
pointer-events: none;
|
|||
|
|
} */
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div id="app">
|
|||
|
|
<!-- <video id="player-container-id" width="780" height="360" preload="auto" playsinliwebkit-playsinlinene
|
|||
|
|
autoplay="autoplay" v-if="videoType == 'UAV'">
|
|||
|
|
</video>
|
|||
|
|
<video id="videoDeom" autoplay controls controlslist="nodownload" disablePictureInPicture
|
|||
|
|
oncontextmenu="return false" v-else style="width: 95vw; height: 95vh;margin-left:2vw;object-fit: fill">
|
|||
|
|
<source src="./audio/DJI_0042.MP4" type="video/mp4" />
|
|||
|
|
</video> -->
|
|||
|
|
<video id="player-container-id" width="780" height="360" preload="auto" playsinliwebkit-playsinlinene
|
|||
|
|
autoplay="autoplay">
|
|||
|
|
</video>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|
|||
|
|
<script src="./js/vue.min.js"></script>
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
var vm = new Vue({
|
|||
|
|
el: "#app",
|
|||
|
|
data: {
|
|||
|
|
videoType: 'VIDEO',
|
|||
|
|
TCPlayerVideo:null
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
var player = TCPlayer('player-container-id', {}); // player-container-id 为播放器容器 ID，必须与 html 中一致
|
|||
|
|
function childFunction() {
|
|||
|
|
var flvStr = localStorage.getItem("flvStr")
|
|||
|
|
console.log(flvStr)
|
|||
|
|
if (flvStr == '17853305026') {
|
|||
|
|
vm.videoType = 'VIDEO'
|
|||
|
|
const videoDiv = document.getElementById('videoDeom')
|
|||
|
|
videoDiv.load()
|
|||
|
|
videoDiv.play()
|
|||
|
|
const myDiv = document.getElementById('videoDeom')
|
|||
|
|
console.log(myDiv)
|
|||
|
|
myDiv.addEventListener("click", (event) => {
|
|||
|
|
event.preventDefault();
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
console.log('UAV')
|
|||
|
|
vm.videoType = 'UAV'
|
|||
|
|
player.src(flvStr); // url 播放地址
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function destroyVideo() {
|
|||
|
|
// player.dispose()
|
|||
|
|
player.pause()
|
|||
|
|
// const videoDiv = document.getElementById('videoDeom')
|
|||
|
|
// videoDiv.pause()
|
|||
|
|
}
|
|||
|
|
</script>
|