search

webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
736 stars 63 forks source link

www.youtube.com - Video 360°view is not available #47886

Closed sweetriverfish closed 4 years ago

sweetriverfish commented 4 years ago

URL: https://www.youtube.com/watch?v=JtYa0rb_jGQ

Browser / Version: Firefox 74.0 Operating System: Windows 10 Tested Another Browser: Yes Chrome

Problem type: Site is not usable Description: Buttons or links not working Steps to Reproduce: The 360 view is not working. more characters because I need a 30 minimum

Browser Configuration
  • gfx.webrender.all: false
  • gfx.webrender.blob-images: true
  • gfx.webrender.enabled: false
  • image.mem.shared: true
  • buildID: 20200131013147
  • channel: nightly
  • hasTouchScreen: false
  • mixed active content blocked: false
  • mixed passive content blocked: false
  • tracking content blocked: false

View console log messages

From webcompat.com with ❤️

softvision-oana-arbuzov commented 4 years ago

Thanks for the report, I was able to reproduce the issue. image

Missing element:

<div class="ytp-webgl-spherical-control" tabindex="0" aria-label="Spherical video control. Use the arrow keys to pan the video." data-layer="3" style="touch-action: none;" draggable="true">
    <svg height="100%" version="1.1" viewBox="0 0 50 50" width="100%">
        <use class="ytp-svg-shadow" xlink:href="#ytp-id-32"></use>
        <use class="ytp-svg-shadow" xlink:href="#ytp-id-33"></use>
        <circle cx="25" cy="25" fill="#fff" r="24" id="ytp-id-32"></circle>
        <path d="M11.46,29.41 L9.97,30.90 L4,24.95 L9.97,19 L11.46,20.48 L7.00,24.95 L11.46,29.41 M42.46,24.95 L38,20.48 L39.48,19 L45.46,24.95 L39.48,30.90 L38,29.41 L42.46,24.95 M24.5,42.43 L28.96,37.96 L30.45,39.45 L24.5,45.43 L18.54,39.45 L20.03,37.96 L24.5,42.43 M24.5,6.97 L20.03,11.43 L18.54,9.94 L24.5,3.96 L30.45,9.94 L28.96,11.43 L24.5,6.97 Z" fill="#999" id="ytp-id-33"></path>
    </svg>
</div>

Tested with: Browser / Version: Firefox Nightly 74.0a1 (2020-02-02) Operating System: Windows 10 Pro

Moving to Needsdiagnogis for further investigation.

karlcow commented 4 years ago

so if I fake the ua to be chrome the button doesn't appear either. so they probably do the correct with regards to feature detection.

the button appears in Safari tech preview too. 

<div class="ytp-webgl-spherical-control"
     tabindex="0"
     aria-label="Contrôle des vidéos sphériques&nbsp;: utilisez les touches fléchées pour faire un panoramique de la vidéo."
     data-layer="3"
     style="touch-action: none;"
     draggable="true"><svg height="100%"
         version="1.1"
         viewBox="0 0 50 50"
         width="100%">
        <use class="ytp-svg-shadow"
             xlink:href="#ytp-id-32"></use>
        <use class="ytp-svg-shadow"
             xlink:href="#ytp-id-33"></use>
        <circle cx="25"
                cy="25"
                fill="#fff"
                r="24"
                id="ytp-id-32"></circle>
        <path d="M11.46,29.41 L9.97,30.90 L4,24.95 L9.97,19 L11.46,20.48 L7.00,24.95 L11.46,29.41 M42.46,24.95 L38,20.48 L39.48,19 L45.46,24.95 L39.48,30.90 L38,29.41 L42.46,24.95 M24.5,42.43 L28.96,37.96 L30.45,39.45 L24.5,45.43 L18.54,39.45 L20.03,37.96 L24.5,42.43 M24.5,6.97 L20.03,11.43 L18.54,9.94 L24.5,3.96 L30.45,9.94 L28.96,11.43 L24.5,6.97 Z"
              fill="#999"
              id="ytp-id-33"></path>
    </svg></div>

This is implemented by https://www.youtube.com/yts/jsbin/player_ias-vflp5fPn0/fr_FR/webgl.js

Ah and in https://www.youtube.com/yts/jsbin/player_ias-vflp5fPn0/fr_FR/base.js

    rka = function(a) {
        var b = a.o.getVideoData()
          , c = a.o.P().experiments
          , d = g.fl()
          , e = g.Q(c, "enable_spherical_kabuki");
        a = g.Tx(a.o.P());
        if (b.Vf())
            return d || e || a || g.Q(c, "html5_enable_spherical");
        if (b.cg())
            return a || d || e || g.Q(c, "html5_enable_spherical");
        if (b.dg())
            return a || d || g.Q(c, "html5_enable_spherical3d");
        if (b.Qi())
            return a || g.Q(c, "html5_enable_anaglyph3d") || !1;
        d = b.Ba && b.Ba.video && nv(b.Ba.video);
        return a && !g.xB(b) && !b.isVisualizerEligible && !d && (g.Q(c, "enable_webgl_noop") || g.Q(c, "html5_enable_bicubicsharp") || g.Q(c, "html5_enable_smartsharp"))
    }
    ;

this object in the code is intesting.

​
c.flags = { 
​​active_view_use_nio: "true", 
​​ad_pod_disable_companion_persist_ads_quality: "true", 
​​align_ad_to_video_player_lifecycle_for_bulleit: "true", 
​​allow_live_autoplay: "true", 
​​allow_poltergust_autoplay: "true", 
​​autoplay_time: "8000", 
​​bulleit_explicitly_use_content_video_ms_for_cue_range: "true", 
​​bulleit_get_midroll_info_timeout_ms: "8000", 
​​bulleit_use_touch_events_for_skip: "true", 
​​custom_csi_timeline_use_gel: "true", 
​​dash_manifest_version: "5", 
​​debug_dapper_trace_id: "", 
​​debug_sherlog_username: "", 
​​delay_ads_gvi_call_on_bulleit_living_room_ms: "0", 
​​delay_gel_until_config_ready: "true", 
​​desktop_action_companion_wta_support: "true", 
​​desktop_image_companion_wta_support: "true", 
​​desktop_player_button_tooltip_with_shortcut: "true", 
​​desktop_shopping_companion_wta_support: "true", 
​​desktop_sparkles_light_cta_button: "true", 
​​desktop_videowall_companion_wta_support: "true", 
​​disable_legacy_desktop_remote_queue: "true", 
​​disable_legacy_pyv_for_web: "true", 
​​disable_new_pause_state3: "true", 
​​disable_simple_mixed_direction_formatted_strings: "true", 
​​embeds_enable_embed_module: "true", 
​​enable_ad_pod_specific_ui: "true", 
​​enable_client_deferred_full_screen_filtering_for_mweb_phones: "true", 
​​enable_eviction_protection_for_bulleit: "true", 
​​enable_kevlar_action_companion_cleanup: "true", 
​​enable_live_premiere_web_player_indicator: "true", 
​​enable_midroll_prefetch_for_html5_unplugged: "true", 
​​enable_mixed_direction_formatted_strings: "true", 
​​enable_overlays_wta: "true", 
​​enable_prefetch_for_postrolls: "true", 
​​enable_survey_termination_on_resize: "true", 
​​enable_ve_tracker_key: "true", 
​​enable_ypc_clickwrap_on_living_room: "true", 
​​endscreen_renderer_on_desktop: "true", 
​​endscreen_renderer_on_desktop_ads: "true", 
​​enforce_cuerange_priority_on_web: "true", 
​​ensure_only_one_resolved_midroll_response_on_web: "true", 
​​ensure_vis_persists_in_full_screen_for_mweb: "true", 
​​external_fullscreen_with_edu: "true", 
​​fast_autonav_in_background: "true", 
​​fixed_padding_skip_button: "true", 
​​forced_brand_precap_duration_ms: "2000", 
​​hfr_dropped_framerate_fallback_threshold: "0", 
​​hide_preskip: "true", 
​​html5_accurate_seeking_redux: "true", 
​​html5_ad_timeout_ms: "0", 
​​html5_adaptation_fix: "true", 
​​html5_allow_video_keyframe_without_audio: "true", 
​​html5_allowable_liveness_drift_chunks: "2", 
​​html5_aspect_from_adaptive_format: "true", 
​​html5_autonav_quality_cap: "0", 
​​html5_av1_thresh: "720", 
​​html5_av1_thresh_arm: "240", 
​​html5_av1_thresh_hcc: "1080", 
​​html5_av1_thresh_lcc: "360", 
​​html5_av1_tv_killswitch: "true", 
​​html5_background_cap_idle_secs: "60", 
​​html5_background_quality_cap: "360", 
​​html5_bandwidth_window_size: "0", 
​​html5_continue_probing_on_missing_drminfo: "true", 
​​html5_deadzone_multiplier: "1.0", 
​​html5_decode_to_texture_cap: "true", 
​​html5_default_ad_gain: "0.5", 
​​html5_default_quality_cap: "0", 
​​html5_delay_initial_loading: "true", 
​​html5_desktop_vr180_allow_panning: "true", 
​​html5_df_downgrade_thresh: "0.2", 
​​html5_disable_aac_ac3: "true", 
​​html5_disable_extra_update_resource: "true", 
​​html5_disable_manifestless_sqless_sync: "true", 
​​html5_disable_move_pssh_to_moov: "true", 
​​html5_disable_non_contiguous: "true", 
​​html5_disable_preserve_reference: "true", 
​​html5_disable_subscribe_new_vis: "true", 
​​html5_drm_set_server_cert: "true", 
​​html5_enable_4k_hq_enc: "true", 
​​html5_enable_ac3: "true", 
​​html5_enable_eac3: "true", 
​​html5_enable_embedded_player_visibility_signals: "true", 
​​html5_enable_extra_sync_killswitch: "true", 
​​html5_enable_json_subtitle: "true", 
​​html5_encrypted_vp9_firefox: "true", 
​​html5_error_cooldown_in_ms: "30000", 
​​html5_expanded_max_vss_pings: "true", 
​​html5_experiment_id_label: "0", 
​​html5_firefox_ambisonic_opus: "true", 
​​html5_fludd_suspend: "true", 
​​html5_gapless_ad_byterate_multiplier: "1.6", 
​​html5_gapless_audio: "true", 
​​html5_gapless_ended_transition_buffer_ms: "200", 
​​html5_gapless_error_check_killswitch: "true", 
​​html5_gapless_max_played_ranges: "12", 
​​html5_gapless_no_requests_after_lock: "true", 
​​html5_gapless_preloading: "true", 
​​html5_gapless_seek_tolerance_secs: "3.0", 
​​html5_gl_fps_threshold: "0", 
​​html5_gllat: "true", 
​​html5_hack_gapless_init: "true", 
​​html5_hdcp_probing_stream_url: "", 
​​html5_hdr_separate_keys_support: "true", 
​​html5_health_to_gel: "true", 
​​html5_hfr_quality_cap: "0", 
​​html5_hls_initial_bitrate: "0", 
​​html5_hls_min_video_height: "0", 
​​html5_ignore_background_dfd: "true", 
​​html5_ignore_bad_bitrates: "true", 
​​html5_ignore_start_seconds_for_ads_killswitch: "true", 
​​html5_in_buffer_ptl_timeout_ms: "0", 
​​html5_incremental_parser_buffer_duration_secs: "1.5", 
​​html5_incremental_parser_buffer_extra_bytes: "16384", 
​​html5_inline_video_quality_survey: "true", 
​​html5_ios4_seek_above_zero: "true", 
​​html5_ios7_force_play_on_stall: "true", 
​​html5_ios_force_seek_to_zero_on_stop: "true", 
​​html5_jumbo_mobile_subsegment_readahead_target: "3.0", 
​​html5_jumbo_ull_nonstreaming_mffa_ms: "4000", 
​​html5_jumbo_ull_subsegment_readahead_target: "1.3", 
​​html5_license_constraint_delay: "5000", 
​​html5_live_abr_head_miss_fraction: "0.0", 
​​html5_live_abr_repredict_fraction: "0.0", 
​​html5_live_low_latency_bandwidth_window: "0.0", 
​​html5_live_normal_latency_bandwidth_window: "0.0", 
​​html5_live_quality_cap: "0", 
​​html5_live_ultra_low_latency_bandwidth_window: "0.0", 
​​html5_log_hls_video_height_change_as_format_change: "true", 
​​html5_log_playback_rate_change_killswitch: "true", 
​​html5_log_rebuffer_events: "5", 
​​html5_long_rebuffer_threshold_ms: "30000", 
​​html5_manifestless_interpolate: "true", 
​​html5_manifestless_max_segment_history: "0", 
​​html5_manifestless_media_source_duration: "25200", 
​​html5_manifestless_synchronized: "true", 
​​html5_manifestless_vp9: "true", 
​​html5_manifestless_vp9_otf: "true", 
​​html5_max_av_sync_drift: "50", 
​​html5_max_headm_for_streaming_xhr: "0", 
​​html5_max_live_dvr_window_plus_margin_secs: "46800.0", 
​​html5_max_readahead_bandwidth_cap: "0", 
​​html5_maximum_readahead_seconds: "0.0", 
​​html5_media_fullscreen: "true", 
​​html5_min_readbehind_cap_secs: "60", 
​​html5_min_readbehind_secs: "0", 
​​html5_min_upgrade_health: "0", 
​​html5_minimum_readahead_seconds: "0.0", 
​​html5_new_elem_on_hidden: "true", 
​​html5_no_placeholder_rollbacks: "true", 
​​html5_peak_shave: "true", 
​​html5_platform_minimum_readahead_seconds: "0.0", 
​​html5_platform_whitelisted_for_frame_accurate_seeks: "true", 
​​html5_player_autonav_logging: "true", 
​​html5_player_min_build_cl: "-1", 
​​html5_post_interrupt_readahead: "20", 
​​html5_prefer_server_bwe3: "true", 
​​html5_probe_live_using_range: "true", 
​​html5_probe_primary_delay_base_ms: "0", 
​​html5_probe_primary_failure_factor: "4", 
​​html5_probe_secondary_during_timeout_miss_count: "2", 
​​html5_qoe_intercept: "", 
​​html5_qoe_length: "1000", 
​​html5_qoe_user_intent_match_health: "true", 
​​html5_quality_cap_min_age_secs: "0", 
​​html5_readahead_ratelimit: "3000", 
​​html5_remove_pause: "false", 
​​html5_request_size_padding_secs: "3.0", 
​​html5_request_sizing_multiplier: "0.8", 
​​html5_restrict_streaming_xhr_on_sqless_requests: "true", 
​​html5_seek_jiggle_cmt_delay_ms: "0", 
​​html5_seek_new_elem_delay_ms: "0", 
​​html5_seek_over_discontinuities: "true", 
​​html5_seek_set_cmt_delay_ms: "2000", 
​​html5_seek_timeout_delay_ms: "20000", 
​​html5_shrink_live_timestamps: "true", 
​​html5_source_buffer_attach_delay_time: "15000", 
​​html5_source_buffer_attach_retry_limit: "0", 
​​html5_sticky_reduces_discount_by: "0.0", 
​​html5_stop_video_in_cancel_playback: "true", 
​​html5_store_xhr_headers_readable: "true", 
​​html5_streaming_xhr_buffer_mdat: "true", 
​​html5_streaming_xhr_try_cobalt: "true", 
​​html5_streaming_xhr_try_webm: "true", 
​​html5_subsegment_readahead_load_speed_check_interval: "0.5", 
​​html5_subsegment_readahead_min_buffer_health_secs: "0.25", 
​​html5_subsegment_readahead_min_buffer_health_secs_on_timeout: "0.1", 
​​html5_subsegment_readahead_min_load_speed: "1.5", 
​​html5_subsegment_readahead_seek_latency_fudge: "0.5", 
​​html5_subsegment_readahead_target_buffer_health_secs: "0.5", 
​​html5_subsegment_readahead_timeout_secs: "2.0", 
​​html5_suspend_loader: "true", 
​​html5_time_based_consolidation_ms: "0", 
​​html5_unrewrite_timestamps: "true", 
​​html5_video_tbd_min_kb: "0", 
​​ignore_empty_xhr: "true", 
​​info_cards_renderer_on_desktop: "true", 
​​info_cards_renderer_on_desktop_ads: "true", 
​​kevlar_allow_multistep_video_init: "true", 
​​kevlar_autonav_miniplayer_fix: "true", 
​​kevlar_frontend_video_list_actions: "true", 
​​kevlar_miniplayer: "true", 
​​kevlar_miniplayer_expand_top: "true", 
​​kevlar_miniplayer_play_pause_on_scrim: "true", 
​​kevlar_playback_associated_queue: "true", 
​​kevlar_queue_use_dedicated_list_type: "true", 
​​kevlar_queue_use_update_api: "true", 
​​live_chunk_readahead: "3", 
​​live_fresca_v2: "true", 
​​mark_encrypted_webm_supporting_widevine: "true", 
​​max_resolution_for_white_noise: "360", 
​​mdx_enable_privacy_disclosure_ui: "true", 
​​midroll_notify_time_seconds: "5", 
​​mweb_always_check_for_cache_data_for_companion: "true", 
​​mweb_cougar_big_controls: "true", 
​​mweb_enable_custom_control_shared: "true", 
​​mweb_enable_skippables_on_jio_phone: "true", 
​​mweb_muted_autoplay_animation: "shrink", 
​​mweb_native_control_in_faux_fullscreen_shared: "true", 
​​overwrite_polyfill_on_logging_lib_loaded: "true", 
​​pass_biscotti_id_in_header_ajax: "true", 
​​persist_text_on_preview_button: "true", 
​​player_allow_autonav_after_playlist: "true", 
​​player_destroy_old_version: "true", 
​​player_enable_playback_playlist_change: "true", 
​​playready_first_play_expiration: "-1", 
​​postroll_notify_time_seconds: "5", 
​​preskip_button_style_ads_backend: "countdown_next_to_thumbnail", 
​​release_player_on_abandon_for_bulleit_lr_ads_frontend: "true", 
​​render_enhanced_overlays_as_ctas_for_desktop_style: "unset", 
​​sdk_ad_prefetch_time_seconds: "-1", 
​​set_interstitial_advertisers_question_text: "true", 
​​set_interstitial_start_button: "true", 
​​should_clear_video_data_on_player_cued_unstarted: "true", 
​​show_countdown_on_bumper: "true", 
​​show_interstitial_for_3s: "true", 
​​show_interstitial_white: "true", 
​​show_thumbnail_on_standard: "true", 
​​simply_enable_botguard: "true", 
​​skip_ad_button_with_thumbnail: "true", 
​​tvhtml5_disable_live_prefetch: "true", 
​​tvhtml5_min_readbehind_secs: "20", 
​​tvhtml5_unplugged_preload_cache_size: "5", 
​​unplugged_tvhtml5_botguard_attestation: "true", 
​​unplugged_tvhtml5_video_preload_on_focus_delay_ms: "0", 
​​use_button_command_field_for_web_survey_interstitial: "true", 
​​use_forced_linebreak_preskip_text: "true", 
​​use_new_skip_icon: "true", 
​​use_revamped_survey_design_for_desktop: "true", 
​​use_survey_skip_in_0s: "true", 
​​use_touch_events_for_bulleit_mweb: "true", 
​​variable_buffer_timeout_ms: "0", 
​​variable_load_timeout_ms: "0", 
​​visibility_error_html_dump_sample_rate: "0.01", 
​​web_api_url: "true", 
​​web_gel_debounce_ms: "10000", 
​​web_gel_timeout_cap: "true", 
​​web_logging_max_batch: "100", 
​​web_network_combined_catch: "true", 
​​web_player_api_logging_fraction: "0.01", 
​​web_player_inline_botguard: "true", 
​​web_player_ipp_canary_type_for_logging: "", 
​​web_player_live_monitor_env_killswitch: "true", 
​​web_player_live_monitor_env_killswitch2: "true", 
​​web_player_music_visualizer_treatment: "fake", 
​​web_player_response_fairplay_config_killswitch: "true", 
​​web_player_response_overlay_parsing: "false", 
​​web_player_response_playback_tracking_parsing: "true", 
​​web_player_sentinel_is_uniplayer: "true", 
​​web_player_show_music_in_this_video_graphic: "video_thumbnail", 
​​web_player_watch_next_response: "true", 
​​web_post_search: "true", 
​​web_use_beacon_api_for_ad_click_server_pings: "true", 
​​web_yt_config_context: "true", 
​​www_for_videostats: "true"
}

for some reason at a point it seems to say html5 webgl is not working. The code being minified it is not obvious what is it testing.

I propose we switch to contactready and ask directly youtube about it.

karlcow commented 4 years ago

Youtube has been contacted.

karlcow commented 4 years ago 
This seems to have failed due to a sanity check in our code.

const canvas = document.createElement('canvas')
const gl = canvas.getContext('webgl')
const prog = gl.createProgram()
gl.getProgramParameter(prog, gl.ATTACHED_SHADERS)
>> 2
gl.getAttachedShaders(prog)
>> Array []

Our code contains a sanity check to make sure that the number of attached shaders matches the number of shaders we have attached. 
In the latest FireFox nightly it seems like the initial value of ATTACHED_SHADERS became 2 instead of 0. (but getAttachedShaders returns the correct result -- an empty array)
Fixing that should restore 360 video functionalities.
karlcow commented 4 years ago

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1616132

lock[bot] commented 4 years ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.